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 相关文章推荐
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
详解react-redux插件入门
Apr 19 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 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实现var_export的详细介绍
2013/06/20 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
Angular工具方法学习
2016/12/26 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
vue中的scope使用详解
2017/10/29 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
python3 读写文件换行符的方法
2018/04/09 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
应届生体育教师自荐信
2013/10/03 职场文书
驾驶员岗位职责
2014/01/29 职场文书
工程承包协议书范本
2014/09/29 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
春节晚会开场白
2015/05/29 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript