测试的浏览器环境:

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

IE9 IE8 IE7 IE6 firefox chrome 都表现不好，第一次输入文字的时候(比如 纯英文数字 a)，div 里都没有文字显示，延迟明显。
（注意，此时keydown 事件是有触发，只是不能及时拿到input 框里的value, 也就是 还是会执行代码 console.log(1) ）
 
IE9 IE8 IE7 IE6 firefox 搜狗输入法，输入汉字，输入完按回车或者空格，div 里都没有文字
chrome 搜狗输入法，输入汉字，如果按回车下面字母实时出现表现正常，如果按空格，div 里还是字母，而input里却是汉字了。
 
改进的方案是 写一个setTimeout(function(){ $("div").text(this.value);}, 0)
IE9 IE8 IE7 IE6 firefox 都表现良好，一直按着键不松开的话，也可以实时变化。
但是对于 chrome 的搜狗输入法， 点击空格的时候，有时文本框里是汉字，下面内容仍然为 字母。
 
3. keypress
IE9 IE8 IE7 IE6 firefox chrome 都表现不好，第一次输入文字的时候(比如 纯英文数字 a)，div 里都没有文字显示，延迟明显。
搜狗输入法，输入汉字，输入完按回车或者空格，div 里都没有文字
 
按 Backspace 删除键，div 里不会变化，只有firefox 表现正常。
 
若用 setTimeout 解决。 按 Backspace 删除键，div 里仍然不会变化(只有firefox 表现正常)。
搜狗拼音输入法 输入aaaaa按回车和空格下面的div 内容都不会有任何变化。
 
总结:
兼容性比较好的是 keyup。
当你光标聚焦到 input 时, 最好设置一个 setInterval定时器，当在input里面不断输入的时候，一直监测里面的值的变化。
而另外一种解决方案：IE下用 onpropertychange，而其它浏览器用 input 还是会有兼容性的问题，不推荐。（有点忘记了是什么问题，应该还是不能即时获取input框里的值）

keyup keydown keypress 区别的更多相关文章

  1. （转）KeyDown、KeyUp、KeyPress区别

    Windows窗体通过引发键盘事件来处理键盘输入以响应Windows消息,大多数Windows窗体应用程序都通过处理键盘事件来以独占方式处理键盘输入. 1．按键的类型 Windows窗体将键盘输入标 ...

  2. keyDown keyPress keyUp 事件的区别

    keyDown keyPress keyUp  事件的区别 一 触发顺序 显而易见,事件发生的顺序是: keydown --> keypress --> keyup 当按住一个键一段时间后 ...

  3. keydown - > keypress - > keyup 用法和区别

    英文输入法:   事件触发顺序:keydown - > keypress - > keyup   中文输入法:   firfox:输入触发keydown,回车确认输入触发keyup chr ...

  4. keydown,keypress,keyup三者之间的区别

    最近看了Javascript高级教程中对过滤输入的介绍,想实现比如电话号码中不能包好非数值的字符,而相应文本中插入字符的操作是keypress事件,所以就想通过阻止这个事件的默认事件行为来阻止这个事件 ...

  5. Delphi keydown与keyup、keypress的区别（KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键）

    Shift 是一个集合变量.type TShiftState = set of (ssShift, ssAlt, ssCtrl, ssLeft, ssRight, ssMiddle, ssDouble ...

  6. 键盘事件之keydown keypress keyup区别

    经过测试,显然事件执行的顺序是: keydown->keypress->keyup. 但是连续按一个按键的话,会一直触发:keydown keypress.直到你提起按键,会触发keyup ...

  7. KeyDown,KeyPress 和KeyUp

    研究了一下KeyDown,KeyPress 和KeyUp ,发现之间还是有点学问的.让我们带着如下问题来说明,如果你看到这些问题你都知道,那么这篇文章你就当复习吧:) 1.这三个事件的顺序是怎么样的? ...

  8. keydown - > keypress - > keyup

    英文输入法:   事件触发顺序:keydown - > keypress - > keyup   中文输入法:   firfox:输入触发keydown,回车确认输入触发keyup chr ...

  9. KeyDown,KeyPress和KeyUp详解(转)

    1．按键的类型 Windows窗体将键盘输入标识为由按位Keys枚举表示的虚拟键代码.使用Keys枚举,可以综合一系列按键以生成单个值,这些值与WM_KEYDOWN和WM_SYSKEYDOWNWind ...

随机推荐

  1. Hive 实战(1)--hive数据导入/导出基础

    前沿: Hive也采用类SQL的语法, 但其作为数据仓库, 与面向OLTP的传统关系型数据库(Mysql/Oracle)有着天然的差别. 它用于离线的数据计算分析, 而不追求高并发/低延时的应用场景. ...

  2. 【转】iOS bitcode实战 -- without full bitcode

    原文网址:http://www.voidcn.com/blog/GrowingGiant/article/p-5012705.html 关于bitcode的介绍,直接看下边两篇: 理解Bitcode: ...

  3. 移动POS机

    1.怎么识别手刷机所属公司是否是二清公司,甚至是多清 去银行,手机银行,网上银行查询该笔款是哪里汇出的,如果是银行或合法支付公司汇出,一般为一清机,如果是个人或无支付牌照的支付公司,一般为二清机: 已 ...

  4. c语言多线程队列读写

    最近用c语言写了个简单的队列服务,记录一下,文件结构为 main.c queue.c queue.h,代码如下: 主函数 #define NUM_THREADS 200 #include <st ...

  5. maven 几个插件的使用

    1.  compile <plugin> <artifactId>maven-compiler-plugin</artifactId> <configurat ...

  6. 原创：cellmap 基站查询 for android

    cellmap for android 3.6.8.7.9.8 更新日期:2016年12月30日 特别声明:本软件不能进行手机定位,不能对手机号码定位,谨防被骗. 下载地址: cellmap3.6.8 ...

  7. 卫星地图下载软件WebImageDowns

    卫星地图下载软件WebImageDowns一款基于网络服务器的多线程卫星地图下载软件.支持多种网络地图.软件可以高速下载您所指定的任意经纬度范围的卫星地图,并可将所下载的卫星地图进行无缝拼接,使您可以 ...

  8. ocanvas 画板

    使用ocanvas做了个简单的在线画板. ocanvas参考:http://ocanvas.org/ 效果如下: 主要代码如下: <!DOCTYPE html> <html> ...

  9. Socket的三个功能类TCPClient、TCPListener 和 UDPClient （转）

    应用程序可以通过 TCPClient.TCPListener 和 UDPClient 类使用传输控制协议 (TCP) 和用户数据文报协议 (UDP) 服务.这些协议类建立在 System.Net.So ...

  10. CRM Xrm.Page 的对象层次结构