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

通常对文本框或者文本域进行实时监控并作出相关的业务，需要使用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。