javascript中的onkeyup和onkeydown区别介绍


Posted in Javascript onApril 28, 2013

昨天在写上次那个动态生成年月日下拉框和文本框限制输入的时候遇到了一个问题,文本框里输入的时候要开始计算文本框里面输入了多少字,自然想到了onkeydown事件,然后计算value.length的方法,看代码吧

moto.onkeydown=function(){ 
var curlen=+this.value.length; 
shuru.innerHTML=curlen; 
shuru2.innerHTML=+(200-curlen); 
if(curlen>=200){ 
this.value=this.value.substring(0,200); 
curlen=200; 
shuru.innerHTML=200; 
shuru2.innerHTML=0; 
return false; 
} 
}

结果发现文字输入完之后字数计算的不对,本来是4个字输入完之后发现发现字数还是显示0
javascript中的onkeyup和onkeydown区别介绍
想了好久,最后当吧onkeydown换成onkeyup之后,一切就好了
javascript中的onkeyup和onkeydown区别介绍
查了一下然来这两个事件是有不同的
onkeydown是按下的时候触发的,这个时候键值没有输出来。 onkeyup是按键抬起的时候执行的,这个时候键值已经有了。和按多长时间没关系,比如你给输入框加这2个事件,
<input type="text" id="test1" onkeydown="alert(this.value);"/> 
<input type="text" id="test2" onkeyup="alert(this.value);"/>

你看看这二个不同的运行结果就明白 了!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
</head> 
<body> 
<input type="text" id="test1" onkeydown="alert(this.value);"/> 
<input type="text" id="test2" onkeyup="alert(this.value);"/> 
</body> 
</html>

onkeydown是按下的时候触发的,这个时候键值没有输出来。
onkeyup是按键抬起的时候执行的,这个时候键值已经有了。
和按多长时间没关系,比如你给输入框加这2个事件,
Javascript 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
javascript基础知识讲解
Jan 11 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 #Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 #Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 #Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 #Javascript
js自动下载文件到本地的实现代码
Apr 28 #Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 #Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 #Javascript
You might like
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
完全深入学习Bootstrap表单
2016/11/28 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
学习Vue组件实例
2018/04/28 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
Python元组及文件核心对象类型详解
2018/02/11 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
网络教育自我鉴定
2013/11/01 职场文书
销售求职信范文
2014/05/26 职场文书
副总经理岗位职责
2015/02/02 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
Python字典的基础操作
2021/11/01 Python
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python