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 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
Javascript 布尔型分析
Dec 22 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
JavaScript小技巧 2.5 则
Sep 12 Javascript
jquery 插件学习(四)
Aug 06 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
js实现一个简易计算器
Mar 30 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
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
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
jquery插件jSignature实现手动签名
2015/05/04 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
js数组的基本使用总结
2021/01/18 Javascript
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
python虚拟环境迁移方法
2019/01/03 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
奥巴马英文演讲稿
2014/05/15 职场文书
食品流通安全承诺书
2014/05/22 职场文书
关于读书的活动方案
2014/08/14 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
高中教师个人工作总结
2015/02/10 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python
选购到合适的激光打印机
2022/04/21 数码科技