DOM事件实时监听文本框改变-使用keyup与change

发布于 2023-09-05  642 次阅读


内容纲要

通常对文本框或者文本域进行实时监控并作出相关的业务,需要使用onchange属性或者change事件,但是change存在一个问题,就是他是当元素失去焦点时才会进行响应,如果需要精确到每一个字符,使用chang是很难办的(考虑二次开发Event对象的接口或许能够做到)。

换种思路,可以使用键盘事件,键盘事件有两种:keyup和keydown。

keydown不能完成这种要求。因为keydown时文本尚未输入,获取到文本框的内容具有滞后性,除非对每次键盘按下的内容进行拼接,不过这样没必要。

所以选择keyup事件,当Keyup时文本已经被输入到文本框。

keyup不是针对全局的,为了防止在元素外也产生keyup事件,对文本框原数使用onkeyup属性,或者使用addEventListener.

let expression_dom=document.getElementById(input_determinant_id);
expression_dom.addEventListener('keyup',()=>{
    console.log(expression_dom.value);
});

一个简单的示例,在文本框被输入时打印当前文本框内容。

配合focus可以实现对文本框监听自动改变焦点:


                                    <!--                                    更新文本框的js-->
                                    num=0;
                                    window.list=document.getElementsByClassName("field-wrap");
                                    window.inputList=[
                                        document.getElementById('char0'),
                                        document.getElementById('char1'),
                                        document.getElementById('char2'),
                                        document.getElementById('char3'),
                                        document.getElementById('char4'),
                                        document.getElementById('char5'),
                                    ]
                                    window.addEventListener('keyup',function(){
                                        up_iframe=document.getElementById('up_iframe');
                                        // 判断是删除还是填充
                                        val=window.inputList[num].value;
                                        if(val==""){
                                            if (num>=1 && num<=5){
                                                window.list[num-1].childNodes[1].focus();
                                                num-=1;
                                            }else{
                                                window.list[0].focus();
                                            }
                                        }else{
                                            if (num<5){
                                                window.list[num+1].childNodes[1].focus();
                                                num+=1;
                                            }else{
                                                window.list[5].focus();
                                            }
                                        }
                                    

效果:

上面那段代码存在一些小瑕疵,因为事件监听器是绑定在window对象上的,所以相对整个窗口都能被keyup事件影响,更加合理的做法应该是在验证码框的父元素绑定keyup事件。

总结:

1.在对文本框改变进行监听时使用keyup会相对于chang有更好的响应效果。

2.不要将keyup与keydown用错,keyup才会再文本被输入之后产生事件回调。

3.键盘事件具有全局性,一定要将事件监听器绑定到被监听的元素DOM上,或者在对应元素通过onkeyup指定封装的函数,切记不要随意绑定到window或者document。