zoukankan      html  css  js  c++  java
  • 实时监听input输入内容的N种方法

    现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对
    首先我们创建一个input输入框

        <form name='loginForm'>
            <input type='text' name='user'/>
        </form>

    接着获取这个文本框

    var loginForm=document.forms['loginForm'],
        user=loginForm.elements['user'];
        //无需设置input的id属性,只设置name即可


    方法一
    change事件

    user.onchange=function(){
        consolo.log(user.value);
    }


    没错,这个方法的确可以帮助我们解决监听input输入内容的需求,不过这个方法有一个致命的缺点,他不是实时监听,只有input失去焦点且文本框内容发生改变才会触发。
    方法二
    keydown事件
    keypress事件
    keyup事件
    这是三个键盘事件,不过这三个事件还是有一些不同
    1.当按一下任意键,会触发onkeydown事件,如果不松开,将一直触发。
    2.当按一下字符键(比如abcd1234这些)会触发onkeypress事件,如果不松开,将一直触发这个事件。
    3.当释放键盘上的键,才触发onkeyup事件。
    4.按下一个键盘上的字符键,三种事件的触发顺序keydown -> keypress -> keyup
    5.按下esc键,在firefox浏览器以及ie浏览器会触发keypress事件,在chrome浏览器和Opera浏览器不会触发keypress(js高级程序设计第三版P379页的说法并不精确)

            user.onkeypress=function(){
                console.log(user.value);
            };
            user.onkeydown=function(){
                console.log(user.value);
            };
            user.onkeyup=function(){
                console.log(user.value);
            }


    实际检测时会发现,keydown事件以及keypress事件会存在延迟,每次获取的输入值,都是之前的,总是慢半拍,原因是keydown与keypress总是在新值发生改变之前触发。
    最后发现只有keyup符合要求,不过keyup也不是完美的,缺点就是当你复制粘贴值进去的时候,或者浏览器自动记住的值输入进去的时候,keyup事件不会触发

    方法三
    input事件

            user.oninput=function(){
                console.log(user.value);
            }
    input事件就可以完美解决这个问题,不过他也有小缺点,那就是兼容性问题,它不支持ie9以下的浏览器,不过还好,我们有一个ie专属的事件propertychange()

  • 相关阅读:
    MangoDB相关文档阅读小结
    《算法导论》图相关算法小结
    关于GC(下):CMS和G1GC的比较
    《深入理解Java虚拟机》并发(第12~13章)笔记
    关于GC(中):Java垃圾回收相关基础知识
    关于GC(上):Apache的POI组件导致线上频繁FullGC问题排查及处理全过程
    远程调用代码封装杂谈
    深入理解Java的switch...case...语句
    [留档]阿里云主机使用笔记
    企业架构设计之IFW实践回顾
  • 原文地址:https://www.cnblogs.com/cuihongyu3503319/p/10735244.html
Copyright © 2011-2022 走看看