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

以编程方式更改文本时，可以使用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。< / p>

Answer 2

你可以依靠编程器以编程方式更改元素来知道触发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

因此，要回答关于为什么click处理程序将输入显示为具有空值的问题，这是因为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而不会完全破坏它。因此在控制台中，您将看到三个函数调用：当您单击按钮时，输入失去焦点，触发其更改方法，但随后按钮本身会触发其单击处理程序，然后更改输入的值并触发再一次改变处理程序。

希望这有帮助！

再次，将此视为fiddle ...

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

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

3 个答案: