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加解密 脚本解密
Feb 22 Javascript
IE php关于强制下载文件的代码
Aug 23 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 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截取指定2个字符之间字符串的方法
2015/04/15 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
php实现可运算的验证码
2015/11/10 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
使用Python操作MySQL的一些基本方法
2015/08/16 Python
python3中str(字符串)的使用教程
2017/03/23 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
python导入模块交叉引用的方法
2019/01/19 Python
Python制作exe文件简单流程
2019/01/24 Python
python+tkinter实现学生管理系统
2019/08/20 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
物流专业大学应届生求职信
2013/11/03 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
高二学生评语大全
2014/04/25 职场文书
企业晚会策划方案
2014/05/29 职场文书
社区党员公开承诺书
2014/08/30 职场文书
北京英文导游词
2015/02/12 职场文书
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers