Setter 对于 HTMLInputElement.value

Question

我想订阅所有使用自定义 setter:[=18= 的输入中 value 属性的所有更改]

Object.defineProperty(HTMLInputElement.prototype, 'value', {
    set: function(newValue) {
       // do some logic here

       // WHAT PUT HERE to call "super setter"?
    }
});

如果我使用 this.value = newValue; 我会得到 Maximum call stack size exceeded 这是非常正确的但是...

没关系。我应该怎么调用才能以正确的方式更改 value？这是 JSFIDDLE 有更详细的解释。

Answer 1

你不能，有几个原因：

主机提供的对象不必允许属性重新定义。如果它在一个浏览器上有效，则可能在另一个浏览器上无效。
HTMLInputElement 无法访问当前值 other 而不是 value 属性。例如，没有相应的属性可以让你在 value 属性周围做一个 end-运行（value 属性是 default 值，而不是输入的当前值）。

Answer 2

刚刚添加了以下代码

return this.defaultValue = newValue;

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

Answer 3

与公认的答案相反，可以使用JavaScript来实现。

(function (realHTMLInputElement) {
    Object.defineProperty(HTMLInputElement.prototype, 'value', {
      set: function (value) {
        // Do some logic here
        return realHTMLInputElement.set.call(this, value);
      },
    });
}(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')));

我们使用 IIFE 传入 value 的原始定义，然后从我们的新定义中调用原始 set 函数。

Answer 4

这对我有用。为 HTMLInputElement 的特定实例定义值属性，因此您可以使用父级的值属性.

// A specific instance of HTMLInputElement
var txt = document.getElementById('txtInputTagId');

// define value property for your input instance
Object.defineProperty(txt, 'value', {
    set: function(newValue) {
        var valueProp = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
        valueProp.set.call(txt, newValue);

        // Do some logic here
        console.log('setted');
    }
});

Answer 5

cristian.d 解决方案有效，但还需要设置 getter：

function logOnInputChange(obj) {
    var valueProp = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
    // define value property for your input instance
    Object.defineProperty(obj, 'value', {
        set: function(newValue) {
            console.debug(this,'value',this.value,'=>',newValue);
            console.trace();
            valueProp.set.call(this, newValue);
        },
        get : valueProp.get,
    }); 
}

这是为了展示它是如何使用的：

<input id=i1 value="init value" type=text />

和加载处理程序：

var inp;
window.onload = function () {
    inp = document.getElementById('i1');
    inp.value = "init value set by onload";
    console.log('input value:',inp.value);
    logOnInputChange(inp);
    inp.value = "hello!";
    console.log('input value:',inp.value);
};

Setter 对于 HTMLInputElement.value

Setter for HTMLInputElement.value

javascript

getter-setter