Question

我想订阅以使用自定义setter在所有输入中对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

与接受的答案相反，可以使用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 2

这对我有用。为HTMLInputElement的特定实例定义value属性，以便可以使用父级的value属性。

// 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 3

由于以下几个原因，你无法做到：

主机提供的对象不必重新定义属性。如果它在一个浏览器上运行，则可能无法在另一个浏览器上运行。
el.className = "something" e.className = "somethingElse";无法访问当前值其他而不是HTMLInputElement属性。例如，没有相应的属性可以让您围绕value属性进行最终运行（value属性是默认值，而不是输入的当前值。）

Answer 4

仅添加以下代码

return this.defaultValue = newValue;

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

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 />

和onload处理程序：

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);
};

HTMLInputElement.value的Setter

5 个答案: