keyup keydown keypress 区别
测试的浏览器环境:
chrome 版本 43.0.2357.134 m
firefox 版本 24.0
IE6(绿色版 IE.exe)
IE7
IE8
IE9
搜狗拼音输入法3.5(3.5.0.1089)网吧专用安装版
代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Example</title>
</head>
<body>
<input type="text" id='input' />
<div id='div'></div>
<script type='text/javascript'>
var inp = document.getElementById('input');
var div = document.getElementById('div');
inp.onkeydown = function () {
div.innerHTML = inp.value;
console.log(1);
}
</script>
</body>
</html>
结果:
1: keyup
IE9 IE8 IE7 IE6 firefox chrome 表现良好 但是一直按着键,不松开的话,div不会实时变化,直到最后松开时才会有变化,其实因为你的key 还没有up。
chrome 里如果用 搜狗输入法,输入 aaaaaa,还没按空格或者回车确认时,div也会及时发生变化。
2: keydown
keyup keydown keypress 区别的更多相关文章
- (转)KeyDown、KeyUp、KeyPress区别
Windows窗体通过引发键盘事件来处理键盘输入以响应Windows消息,大多数Windows窗体应用程序都通过处理键盘事件来以独占方式处理键盘输入. 1.按键的类型 Windows窗体将键盘输入标 ...
- keyDown keyPress keyUp 事件的区别
keyDown keyPress keyUp 事件的区别 一 触发顺序 显而易见,事件发生的顺序是: keydown --> keypress --> keyup 当按住一个键一段时间后 ...
- keydown - > keypress - > keyup 用法和区别
英文输入法: 事件触发顺序:keydown - > keypress - > keyup 中文输入法: firfox:输入触发keydown,回车确认输入触发keyup chr ...
- keydown,keypress,keyup三者之间的区别
最近看了Javascript高级教程中对过滤输入的介绍,想实现比如电话号码中不能包好非数值的字符,而相应文本中插入字符的操作是keypress事件,所以就想通过阻止这个事件的默认事件行为来阻止这个事件 ...
- Delphi keydown与keyup、keypress的区别(KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键)
Shift 是一个集合变量.type TShiftState = set of (ssShift, ssAlt, ssCtrl, ssLeft, ssRight, ssMiddle, ssDouble ...
- 键盘事件之keydown keypress keyup区别
经过测试,显然事件执行的顺序是: keydown->keypress->keyup. 但是连续按一个按键的话,会一直触发:keydown keypress.直到你提起按键,会触发keyup ...
- KeyDown,KeyPress 和KeyUp
研究了一下KeyDown,KeyPress 和KeyUp ,发现之间还是有点学问的.让我们带着如下问题来说明,如果你看到这些问题你都知道,那么这篇文章你就当复习吧:) 1.这三个事件的顺序是怎么样的? ...
- keydown - > keypress - > keyup
英文输入法: 事件触发顺序:keydown - > keypress - > keyup 中文输入法: firfox:输入触发keydown,回车确认输入触发keyup chr ...
- KeyDown,KeyPress和KeyUp详解(转)
1.按键的类型 Windows窗体将键盘输入标识为由按位Keys枚举表示的虚拟键代码.使用Keys枚举,可以综合一系列按键以生成单个值,这些值与WM_KEYDOWN和WM_SYSKEYDOWNWind ...
随机推荐
- 如何让LinearLayout也有类似Button的点击效果?
有的时候,我们希望LinearLayout布局也有点击的效果,这时候我们不仅需要一个作为背景的selector,还要设置一些其它属性才行: android:clickable="true&q ...
- Appium 解决不能输入中文字符问题
只需在初始化driver方法时,写这两行代码即可: capabilities.setCapability("unicodeKeyboard", "True" ...
- 《C与指针》第二章练习
本章问题 1.Comments in C do not nest(嵌套).What would be the result of "commenting out" the code ...
- JavaScript对象属性赋值操作的逻辑
对象进行属性赋值操作时,其执行逻辑如下所示: 1. 当前对象中是否有该属性?有,进行赋值操作:没有,进行下一步判断. 2. 对象的原型链中是否有该属性?没有,在当前对象上创建该属性,并赋值:有,进行下 ...
- 2016HUAS_ACM暑假集训1A - 士兵队列训练问题
这道题我觉得是个简单的模拟题,整理一下思路,弄清楚题意就好了. 新手上路,采用两个数组进行交互赋值,用的方法也比较笨,思路差不多都在代码的注释里了. 下面是题目大意: 首先将士兵从1开始编号(士兵总数 ...
- python 的内嵌time模板翻译及说明[转]
一.简介 time模块提供各种操作时间的函数 说明:一般有两种表示时间的方式: 第一种是时间戳的方式(相对于1970.1.1 00:00:00以秒计算的偏移量),时间戳是惟一的 ...
- 2、C#入门第2课
1.XML文件读取 XmlDocument xml; string path = "F:\\C#\\功2016.xml"; if (System.IO.File.Exists(pa ...
- spring-实现配置文件读取
spring 实现配置读取 Java 的配置读取方式一般是采用java.utils.Properties 或是apache的Configuration工具:然而 spring 框架内置了配置文件的读取 ...
- sql server Datetime格式转换
select CONVERT(varchar, getdate(), 120 ) 2004-09-12 11:06:08 select replace(replace(replace(CONVERT( ...
- Android控件之SlidingDrawer(滑动式抽屉)详解与实例
SlidingDrawer效果想必大家也见到过,它就是1.5模拟器上进入应用程序列表的效果.下面是截图 一.简介 SlidingDrawer隐藏屏外的内容,并允许用户通过handle以显示隐藏内容.它 ...