监听input输入值变化的方案

水平有限,如有错误,欢迎指正。

一、改变input的输入值的情况:

  1. 用户键盘输入
  2. 鼠标右键复制、剪切、黏贴
  3. 快捷键复制、剪切、黏贴
  4. js获取元素后赋值

    document.getElementsByTagName("input")[0].value=0;

二、常用方法:

  • onkeydown、onkeypress、onkeyup(键盘事件):通过键盘输入触发。

    function onKeyUpHandler(val){
       console.log(val);
    }
    <input type="text" placeholder="please input your age" 
    onkeyup="onKeyUpHandler(this.value)"/>
    

    限制:情况2、4不能触发监听事件,3重复触发(由于复制等操作快捷键是组合键,会导致触发两次监听事件)。

  • onchange:触发机制如下:

    • 1.input捕获到焦点时,存储当前值;
    • 2.input焦点离开后,判断当前值与存储的是否不同,不同就触发onchange事件。
    function onChangeHandler(val){
        console.log(val);
    }
    <input type="text" placeholder="please input your age" 
    onchange="onChangeHandler(this.value)"/>

    限制:并非实时监听,情况4不能触发,1、2、3的触发都必须让input失去焦点(比如在input区域外点击)

  • oninput + onpropertychange:目前使用率最高的解决方案,兼容性强

    // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
    function onInputHandler(event) {
        console.log("得到"+event.target.value);
    }
    // Internet Explorer
    function onPropertyChangeHandler(event) {
        if (event.propertyName.toLowerCase () == "value") {
            console.log(event.srcElement.value);
        }
    }
    <input type="text" placeholder="please input your age" 
    oninput="onInputHandler(event)" 
    onpropertychange="onPropertyChangeHandler(event)"/>

    附jQuery实现

    限制:除情况4以外都能实时触发。

附录:对于情况4可参考以下解决方案:

    原文作者:Dacy06
    原文地址: https://segmentfault.com/a/1190000020098620
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞