实时监听input输入内容的N种方法

时间:2022-03-13 10:43:29

现在有一个需求,需要我们实时监听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()