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刷新当前页面的几种方法总结
Dec 24 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
vue实现列表的添加点击
Dec 29 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
原生js生成图片验证码
Oct 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
用jquery来定位
2007/02/20 Javascript
input的focus方法使用
2010/03/13 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
Python 爬虫的工具列表大全
2016/01/31 Python
Python如何为图片添加水印
2016/11/25 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
python实现AES加密与解密
2019/03/28 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
瑜伽国际:Yoga International
2018/04/18 全球购物
少先队入队活动方案
2014/02/08 职场文书
早会主持词
2014/03/17 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
2014年话务员工作总结
2014/11/19 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
获奖感言一句话
2015/07/31 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
python flask框架快速入门
2021/05/14 Python
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android