Question

var inp = document.querySelector('input');
Object.defineProperty(inp, "value", {
    get: function() {
      console.log('getter');
      return this.value;
    },
    set: function(value) {
       console.log('setter');
       this.value = value + '1';
    }
});

我想用set输入值编写我的逻辑，但是当我尝试获取或设置值时，此代码不起作用，无限循环;

我如何在变更值上做自定义处理程序？（我需要更改值，这样：input.value =＆＃34; custom＆＃34;，no input.setValue（＆＃34; custom＆＃34;）！）

Answer 1

你可以这样做：

＆＃13;

var inp = document.querySelector('input');

function createGetSetValue( inputElement ){
  var value = inputElement.value;
  Object.defineProperty( inputElement, "value", {
    get: function(){ return value; },
    set: function( v ){ value = v + '1'; }
  });
  return inputElement;
};

createGetSetValue( inp );

inp.value = 10;
console.log( inp.value ) // Logs 101

＆＃13;

<input value="2" />

＆＃13;

因为当你使用this.value = x时，你再次调用setter （导致无限循环）。这将独立存储值并设置getter和setter以返回值而不是实际存储在输入中的值，允许您修改它而无需再次调用getter和setter。

获取input.value错误的set descriptors

1 个答案: