有没有办法在以编程方式更改文本框的值时收听它

Question

环境：
仅 JavaScript（无 jquery :(）
按钮单击事件处理程序不可更改。

如果以编程方式更改文本框的值，有没有办法收听它？

<input type="button" id="button1" value="button" />
<input type="text" id="text1" />


var btn1 = document.getElementById('button1');
var txt1 = document.getElementById('text1');
btn1.onclick=function(){ txt1.value = 'hello world'}

https://jsfiddle.net/yrt7e57w/

Answer 1

您可以依靠编码器以编程方式更改元素来知道触发 onChange，但这是一个不确定的命题。浏览其他帖子，这看起来非常有希望：对于您的文本元素，覆盖 setter 和 getter，以便它们自动触发键控更改或编程更改。

var btn1 = document.getElementById('button1');
var txt1 = document.getElementById('text1');


btn1.onclick = function() {
    txt1.value = 'hello world'
  }
  
txt1.addEventListener("change", function(e){
  console.log(txt1.value);
})
  
  //property mutation for hidden input
Object.defineProperty(txt1, "value", {
  // Don't override the getter, but stub it in.
  get: function() {
    return this.getAttribute("value");
  },
  // In the setter, we want to set the value
  //  and also fire off the change event.
  //  By doing this, the coder changing the
  //  value never needs worry about it.
  set: function(val) {
    console.log("set");

    // handle value change here
    this.setAttribute("value", val);

    //fire the event
    if ("createEvent" in document) { //NON IE browsers
      var evt = document.createEvent("HTMLEvents");
      evt.initEvent("change", false, true);
      txt1.dispatchEvent(evt);
    } else { //IE
      var evt = document.createEventObject();
      txt1.fireEvent("onchange", evt);
    }
  }
});

<input type="button" id="button1" value="button" />
<input type="text" id="text1" />

或者将其视为小提琴这里

因此，要回答有关为什么单击处理程序将输入显示为具有空值的问题，这是因为 getter/setter 覆盖了默认值行为。解决这个问题的最简单方法是创建一个自定义 getter/setter 来充当 value 属性的接口：

var btn1 = document.getElementById('button1');
var txt1 = document.getElementById('text1');

btn1.onclick = function() {
  console.log("in the button's click handler, ");
  console.log("Value is: " + txt1.val);
  console.log("--------------------------------")
  txt1.val = 'hello world'
}

txt1.addEventListener("change", function(e) {
  console.log("in txt1.onChange function...")
  console.log(this.val);
  console.log("--------------------------------")
})


//property mutation for hidden input
Object.defineProperty(txt1, "val", {
  get: function() {
    return this.value;
  },
  set: function(val) {
    // handle value change here
    this.value = val;

    //fire the event
    if ("createEvent" in document) { //NON IE browsers
      var evt = document.createEvent("HTMLEvents");
      evt.initEvent("change", false, true);
      txt1.dispatchEvent(evt);
    } else { //IE
      var evt = document.createEventObject();
      txt1.fireEvent("onchange", evt);
    }
  }
});

<input type="button" id="button1" value="button" />
<input type="text" id="text1" />

这里发生的情况是，当单击按钮时，我获取输入的 val 属性（在幕后获取值），然后以编程方式设置同一输入的 val 属性（再次设置 value 属性）。由于某种原因，您无法在不完全破坏输入值属性的情况下在 object.defineProperty 中使用 get/set 。因此，在控制台中，您将看到三个函数调用：当您单击按钮时，输入失去焦点，触发其更改方法，但随后按钮本身触发其单击处理程序，然后该处理程序更改输入的值并触发再次更换处理程序。

希望这可以帮助！

再次，将其视为小提琴......