测试的浏览器环境:
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 都表现良好,一直按着键不松开的话,也可以实时变化。
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框里的值)