说说 input 输入框的事件

亦凉 2022-04-23 06:30 511阅读 0赞

1、从input框获取焦点到，输入值，失去焦点这个过程所有事件，以及一些特点；

**过程：**onfocus -> 键盘输入 -> onkeydown -> onkeypress -> onkeyup -> oninput -> 失去焦点 ->  onchange -> onblur

注意： onchange 事件并不是每次输入框值改变的时候触发的，而是在失去焦点时候，并且在 onblur 之前触发；oninput则是改变时时触发

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70][]

<label for="testInput">用户名：</label>
    <input type="text" name="username" id="testInput" value="张三" onfocus="handleFocus(event)" />
    
    <script>
      //这种方式必须传参数event
      function handleFocus (event) {
        //onfocus事件 value=张三 keyCode=undefined
        console.log('onfocus事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
      };
    
      var input = document.getElementById("testInput");
    
      //这种方式可以不写event
      input.onkeydown = function () {
        console.log('onkeydown事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
      }
    
      input.onkeypress = function () {
        console.log('onkeypress事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
      }
    
      //这里获取到value要加上摁下之后的了
      input.onkeyup = function (event) {
        console.log('onkeyup事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
      }
    
      /*
      * 当用户向 <input> 中尝试输入时触发
      * 该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
      * 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。
      * 另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。
      * oninput 事件是 IE 之外的大多数浏览器支持的事件，在 value 改变时触发，实时的，即每增加或删除一个字符就会触发，然而通
        过 js 改变 value 时，却不会触发。
      * oninput 事件失效情况：a). 当脚本中改变 value 时，不会触发；b).从浏览器的自动下拉提示中选取时，不会触发。
      * */
      input.oninput = function (event) {
        console.log('oninput事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
      }
    
      //onchange 事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发。
      input.onchange = function (event) {
        console.log('onchange事件...', 'value=' + event.target.value, 'keyCode=' + event.keyCode);
      };
    
      input.onblur = function (event) {
        console.log('onblur事件', 'value=' + event.target.value, 'keyCode=' + event.keyCode)
      }
    
    </script>

oninput事件在处理type='file'上传图片时，获取到的event.value = 'C:\\fakepath\\pictureoriginname.jpg' 这样的格式

**2、说说这些事件**

**　　onfocus**

**　　　　**并没有什么特别的，就是当焦点转移到（点击，tab切换） input 框上边的时候触发；

**　　onkeydown**

**　　　　**键盘按下的时候触发，但是此时按下的值并没有被输入到 input ，所以，此时的 value 没有值，或者说它的值 只能是之前的旧值

另外，此时可以阻止按键的默认事件；

**onkeypress**

**　　　　**按键在按下之后，并且是按键松开之前触发的；

和 keydown 一样不能获取新的到 value；此时，也可以阻止按键的默认事件；

但是这个事件对一下按键的支持不好，一些非输入性质的按键（如；delete, backspare）不支持；（除enter）；

**　　oninput**

**　　　　**这个事件很贼，它的触发时机，从上面就可以看到，onpress 之后 onkeyup 之前；

此时，已经可以拿到 value，不能拿到keycode，不可以阻止默认事件了 ；

关键是这货明明是每次输入框的值变化时候出发的，抢了onchange 的饭碗；

另外，这东西是新的，IE9以下不支持，需要使用 onpropertychange；

还有这货，仅仅在input， textarea 支持；

**　　onkeyup**

**　　　　  **按键在松开之后触发的；

能获取新的到 value，keycode；此时，不可以阻止按键的默认事件；

**　　onchange**

**　　　　  **你敢说这是你认识的onchange吗？反正我是不敢；在失去焦点之后触发的，明明是 onchange 为什么是在失去焦点后触发的，还偏偏比 onblur 快；

能获取新的到 value，不能拿到 keycode；此时，不可以阻止按键的默认事件；

**　　onblur**

**　　　　  **失去焦点时候触发，但是还是比 onchange 慢了；

能获取新的到 value，不能拿到 keycode；

参考：[https://www.cnblogs.com/this-day/p/9087419.html][https_www.cnblogs.com_this-day_p_9087419.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70]: /images/20220323/71d194af54984bf1aa047298640be0ea.png
[https_www.cnblogs.com_this-day_p_9087419.html]: https://www.cnblogs.com/this-day/p/9087419.html