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实现 在光标处插入指定内容
May 25 Javascript
javascript测试题练习代码
Oct 10 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
js星星评分效果
Jul 24 Javascript
理解Javascript的call、apply
Dec 16 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
微信小程序实现多图上传
Jun 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 翻页 实例代码
2009/08/07 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
原生js实现轮播图
2017/02/27 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
浅析Python中的join()方法的使用
2015/05/19 Python
python中字符串前面加r的作用
2015/06/04 Python
python模块导入的细节详解
2018/12/10 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
护士自我鉴定
2013/10/23 职场文书
房产继承公证书
2014/04/09 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
颐和园导游词400字
2015/01/30 职场文书
酒店员工手册范本
2015/05/14 职场文书
预备党员表决心的话
2015/09/22 职场文书