测试的浏览器环境:

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. 【ZJOI2004】嗅探器

    练tarjian不错的题,连WA几次后终于会记住tarjian的模板了 原题: 某军搞信息对抗实战演习.红军成功地侵入了蓝军的内部网络.蓝军共有两个信息中心.红军计划在某台中间服务器上安装一个嗅探器, ...

  2. IplImage 结构解读（转）

    typedef struct _IplImage { int nSize;                             /* IplImage大小 */ int ID;           ...

  3. PHP、JAVA、C#、Object-C 通用的DES加密

    PHP.JAVA.C#.Object-C 通用的DES加密 PHP: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  4. ASP.NET 下拉列表绑定枚举类型值,不用再新建一个枚举表

    public partial class Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArg ...

  5. 一步步构建自己的AngularJS(1)——项目初始化

    Angular1距离2009年发布已经好多年了,Angular2也已经出了Beta版,估计今年就能正式发布.大多数人对于Angular1.X的认识仅限于能够在项目中使用,对于其中的深层原理知道的并不多 ...

  6. 安装thrift全过程

    为了研究基于thrift的RPC框架,其实,是想自己基于thrift写一个微服务的platform.首先就是安装Thrift,便于IDL架构生成java的接口文件.多的不说了,开始install的过程 ...

  7. 优秀IT技术文章集(最新)(高质量)

    作者:赵磊 博客:http://elf8848.iteye.com 阅读优秀的文章可以使你快速进步,本文收集了广受好评的优秀IT技术文章,在你有空时读一读,安静下来思考一下. 不断更新中... --- ...

  8. LeetCode "Integer Break"

    A typical CS style DP based solution: class Solution(object): def __init__(self): self.hm = {} def i ...

  9. 万恶的ViewBag

    作个记录,鼓捣了一晚上,他竟然把订单事情给我篡改了 ViewBag.orderNo="20150613202108844"; 页面上出来的竟然是20150613202108840 ...

  10. libpcap和WinPcap

    能从物理上访问网络上的流量后,你需要用软件把它记录下来.这里,我们探究记录.解析和分析被捕获的数据包中最常用的软件库:libpcap和WinPcap.也将介绍包括tcpdump.Wireshark等基 ...