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

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

或将其视为小提琴Here

因此，要回答您关于为什么单击处理程序将输入显示为具有空值的问题，这是因为 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 属性（再次设置值属性）。出于某种原因，您不能在 object.defineProperty 中对输入的 value 属性使用 get/set 而不完全破坏它。所以在控制台中，你会看到三个函数调用：当你点击按钮时，输入失去焦点，触发它的改变方法，但是按钮本身触发它的点击处理程序，然后改变输入的值并触发再次更改处理程序。

希望这会有所帮助！

再次，将其视为fiddle...

Answer 2

当您以编程方式更改文本时，您可以使用element.dispatchEvent(event)。在您的示例中，它看起来像：

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

btn1.addEventListener("click", function() { // Add to OnClick of button.
    txt1.dispatchEvent(new Event('change')); // force change event to run on textbox.
});

txt1.addEventListener("change", function(e){ // EventListener for OnChange of the element.
    alert("changed");
});

仅addEventListener 本身不起作用，因为它并没有在 DOM 中完全改变。

以上是一个简单的解决方案，需要按几下按键，但要获得更易于维护和可重用的解决方案，请查看 Snowmonkey 的答案（可能还有该问题的大多数其他答案）https://stackoverflow.com/a/44708746/640263。

Answer 3

也许这是矫枉过正，
但你可以使用mutationObserver api 到listen to an attribute change,
然后您必须通过setAttribute 方法更改值：

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

btn1.onclick=function(){ txt1.setAttribute('value', 'hello world') }

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log( mutation );
  });    
});
 
// configuration of the observer:
var config = {  attributes:true };
 
// pass in the target node, as well as the observer options
observer.observe(txt1, config);

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