测试的浏览器环境:

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. 移动互联网实战--Web Restful API设计和基础架构

    前言: 在移动互联网的大潮中, Web Restful API逐渐成为Web Server重要的一个分支. 移动端和服务端的交互, 主流的方式还是通过Http协议的形式来进行. 请求以Get/Post ...

  2. js事件处理机制

    一.事件处理程序 a.     DOM0级事件处理程序,被认为是元素的方法. var btn=document.getElementById('myBtn'); btn.onclick=functio ...

  3. strncpy基本用法

    见百度百科. 注意这句话: (c/c++)复制src中的内容(字符,数字.汉字....)到dest,复制多少由num的值决定,返回指向dest的指针.如果遇到null字符('\0'),且还没有到num ...

  4. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  5. linux服务之maven

    curl -O http://mirrors.noc.im/apache/maven/maven-3/3.3.9/binaries/apache-maven-3.3.9-bin.zip [root@d ...

  6. HTML适应手机浏览器宽度

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...

  7. C++中没有finally,那么应该在如何关闭资源

    这是一篇有趣的帖子 原文链接: http://bbs.csdn.net/topics/90070457 楼主: C++中没有finally,那么应该在哪里关闭资源? C++的try{}catch(){ ...

  8. FC 坦克大战 老巢铁墙

    老巢外围铁墙E2A9:AC 80 EFEF80:A5 10 85 45 A5 45 AC D2 E2 用十六进制编辑器打开坦克大战的游戏文件搜索A5 45 F0 25 A5 0B改为AC 80 EF ...

  9. visualSVN Server 设置外网可连接

    首先再根节点右键,打开属性菜单. 打开Network选项卡,在Server name一栏中填入主机域名或者是ip. 然后在创建的项目中单机或者右键,就可以得到访问地址了.

  10. linux后台进程管理工具supervisor

    Linux的后台进程运行有好几种方法,例如nohup,screen等,但是,如果是一个服务程序,要可靠地在后台运行,我们就需要把它做成daemon,最好还能监控进程状态,在意外结束时能自动重启. su ...