有没有什么办法可以监听到value的改变?

XboxYan
  • 6.9k

大家有没有什么办法可以监听到input元素value属性的改变,value是通过外部js改变的,而不是通过鼠标键盘输入改变的

input.value = 50; // onchange或者oninput事件是不行的

注:这里的input值得是表单元素

<input type="text" >
回复
阅读 1k
2 个回答

重写DOM原型方法你觉得呢?

var desc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')
Object.defineProperty(HTMLInputElement.prototype, 'value', {
    ...desc,
    set(v) {
        console.log('set',v);
        desc.set.call(this, v)
    }
})

屏幕快照 2020-05-01 上午7.44.38.png

HTMLInput 元素,是用 onchange 来监听变化的啊

inputEl.onchange = function() {
   console.log("changed to", this.value);
}

如果是代码赋值,需要手工触发 onchange 事件

inputEl.value = 10;   // 先赋值
const ev = document.createEvent("HTMLEvents");  
ev.initEvent("change", false, true);  
inputEl.dispatchEvent(ev); // 然后触发事件

下面的答案虽然不切题,还得留着吧

let input = { value: 0 };

input = new Proxy(input, {
    set(target, key, value, receiver) {
        const oldValue = target[key];
        Reflect.set(target, key, value, receiver);
        if (key.startsWith("on")) { return; }
        if (target.onChange) {
            target.onChange(oldValue, value);
        }
    }
})

input.onChange = function (oldValue, value) {
    console.log("value changed from", oldValue, "to", value);
}

input.value = 10;

// output:
// value changed from 0 to 10

如果 input 对象可以自己控制,还可以这样写

const input = {
    set value(v) {
        const oldValue = this._value;
        this._value = v;
        if (this.onChange) {
            this.onChange(oldValue, v);
        }
    },
    get value() {
        return this._value;
    }
};

input.value = 0;

input.onChange = function (old, value) {
    console.log(`from ${old} to ${value}, now it's ${this._value}`);
}

input.value = 10;
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏