测试的浏览器环境:

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. Python 基礎 - 認識模塊

    什麼是模塊?簡單說就是別人寫好了一堆功能,封裝在一起. 模塊有分二種,一個是之前有提到的 標準庫,就是不需要透過額外的安裝就有的模塊 ,另一個叫 第三方庫,需要另外安裝才能使用的模塊 #!/usr/b ...

  2. 2015GitWebRTC编译实录16

    新问题,看应该是视频编解码那里出问题了.找找看.WebRtc VoiceEngine codecs:ISAC/16000/1 (103)ISAC/32000/1 (104)Unexpected cod ...

  3. Bean

    1. Bean配置项 1.1. ID 在整个IOC容器中Bean的唯一标识 1.2. Class 具体要实例化的类 1.3. Scope 范围,作用域 1.4. Constructor argumen ...

  4. MFC ListContrl 的使用

    m_ISESTList.SetExtendedStyle(m_ISESTList.GetExtendedStyle() | LVS_EX_FULLROWSELECT | LVS_EX_GRIDLINE ...

  5. Jmeter--HTTP Cookie管理器

    一.什么情况下需要用到Cookie 一般情况下对于HTTP请求的用户登入操作,需要用到Cookie来模拟用户操作,或者对一些业务只有在用户登入之后才能进行操作,比如:常见的场景有购买商品.下单.支付等 ...

  6. CSS 知识点

    1:display:block:比较常用于<a><span>这两个标签——因为这两个标签非块元素,如果不用display:block定义一下,因为a标签没有结构,就是没有宽高, ...

  7. Unity3d外包公司 长年承接Unity3d项目外包

    承接Unity3d体感企业项目.游戏项目外包 北京公司.专业团队,成员为专业Unity3d产品公司一线开发人员,有大型产品开发经验: 提供优质的售后服务,保证产品质量,轻量级产品可以提供规范清晰的源代 ...

  8. C++常见gcc编译链接错误解决方法

    除非明确说明,本文内容仅针对x86/x86_64的Linux开发环境,有朋友说baidu不到,开个贴记录一下(加粗字体是关键词): 用“-Wl,-Bstatic”指定链接静态库,使用“-Wl,-Bdy ...

  9. silverlight 鼠标事件处理

    托管代码注册鼠标事件 不需要再.xaml中声明注册事件. .xaml <Ellipse Name=" Fill="Orange" Canvas.Top=" ...

  10. Python类属性，实例属性

    1.Python类数据属性:定义在类里面但在函数外面的变量,它们都是静态的. #一段很简单的代码,但反应了很多 >>> class A(): a=1 #一个类里面有个属性a > ...