• 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框里的值)
  • 相关阅读:
    Java method Exception throw with return instance.
    SQL Profiler Practice.
    FTP 文件 循环 Copy
    【SQL遗补】之 SET NOCOUNT (TransactSQL)
    【WinForm窗体控件开发】之三 窗体控件设计时属性Attribute
    【WinForm窗体控件开发】之三续 窗体控件设计时的事件属性
    【WinForm窗体控件开发】之二 简单的窗体控件
    解决删除DataGridView中数据引发的“DataGridView Default Error Dialog 错误”
    .NET开发WinCE程序之使用软键盘(System.WindowsCE.Forms命名空间)兼容WinCE和桌面操作系统之解决方案
    【C#遗补】之Char.IsDigit和Char.IsNumber的区别
  • 原文地址:https://www.cnblogs.com/zhengming2016/p/5551443.html
Copyright © 2020-2023  润新知