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

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 的搜狗输入法，

keyup <wbr>keydown <wbr>keypress <wbr>区别

点击空格的时候，有时文本框里是汉字，下面内容仍然为字母。

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框里的值）