zoukankan      html  css  js  c++  java
  • 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框里的值)
  • 相关阅读:
    《深入浅出WPF》4.0x名称空间
    《深入浅出WPF》3.0 XAML语法
    DataGridview 自动切换到 下一行
    C# 生成条形码图片,效果不错
    将DataTable 导出为csv
    DataTable,DataGridVIew转换到xls 方法 (转)
    NPOI读取Excel 数据 转。。。
    修改 字段大小
    VC
    统计每天 指定 时间段内 的数据
  • 原文地址:https://www.cnblogs.com/zhengming2016/p/5551443.html
Copyright © 2011-2022 走看看