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 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
React路由管理之React Router总结
May 10 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 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
php基础知识:函数基础知识
2006/12/13 PHP
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
php之Memcache学习笔记
2013/06/17 PHP
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
jQuery知识点整理
2015/01/30 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
sklearn+python:线性回归案例
2020/02/24 Python
学python最电脑配置有要求么
2020/07/05 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
生日邀请函范文
2014/01/13 职场文书
小学生家长评语大全
2014/02/10 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
工厂搬迁方案
2014/05/11 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
中学生自我评价范文
2015/03/03 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
Python实现对齐打印 format函数的用法
2022/04/28 Python