测试的浏览器环境:

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. 使用Timer类的两个实例 动态时钟

    package chapter16; import javax.swing.*; import chapter15.StillClock; import java.awt.event.*; publi ...

  2. PhpStorm中配置xdebug调试环境

    1. 安装xdebug 第一步: 得到本地PHP配置信息 在终端中运行: php -i > outputphp.txt 然后将得到的txt文件中的信息拷贝并复制到http://xdebug.or ...

  3. java中的static关键词

    以下来自:http://www.cnblogs.com/codc-5117/archive/2011/12/04/2275298.html Static基本规则:             (1)一个类 ...

  4. 动态添加Marquee标签，并动态赋值与属性

    前台加载js $(function(){ var publishStr="<%=publishText%>" var marqueeStr=" <mar ...

  5. Kaiju: Fast and sensitive taxonomic classification for metagenomics

    Kaiju: Fast and sensitive taxonomic classification for  metagenomics   问题描述:However, nucleotide comp ...

  6. Appium 解决不能输入中文字符问题

    只需在初始化driver方法时,写这两行代码即可:   capabilities.setCapability("unicodeKeyboard", "True" ...

  7. 使用pip安装python插件的时候出现Microsoft Visual C++ 9.0缺失错误

    使用pip安装python插件的时候出现Microsoft Visual C++ 9.0缺失错误 使用pip安装python插件的时候出现Microsoft Visual C++ 9.0缺失错误 : ...

  8. CSS3圆角

    使用border-radius属性: (1): (2)但是,如果你要在四个角上一一指定,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值: ...

  9. vb6 调用 64位应用程序

    Option Explicit Private Declare Function LoadLibrary Lib "kernel32.dll" Alias "LoadLi ...

  10. 安装jessie记录

    // */ // ]]>   安装jessie记录 Table of Contents 1 引言 2 目标 3 usb安装 4 无线网卡 5 代理上网 6 rabbitvcs 7 locale ...