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 相关文章推荐
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 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编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
use jscript List Installed Software
2007/06/11 Javascript
自己开发Dojo的建议框架
2008/09/24 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
python的三目运算符和not in运算符使用示例
2014/03/03 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
python九九乘法表的实例
2017/09/26 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
pytest中文文档之编写断言
2019/09/12 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
安全事故检讨书
2014/01/18 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
Python 内置函数速查表一览
2021/06/02 Python
详解TypeScript的基础类型
2022/02/18 Javascript
Python日志模块logging用法
2022/06/05 Python