当以编程方式更改输入时，on change 的解决方案不起作用

Question

我已经阅读了为什么 onchange 不起作用？现在我知道了，onchange 事件仅在用户更改输入值时触发。如果以编程方式更改输入，则不应触发。但是我有一个输入字段，当用户通过网站内的 Google 地图小部件更改位置时，该字段会自动填充。当它发生时，我想获得自动填充的值并填充另一个输入字段。以编程方式更改输入时，如何检测或触发功能？

Answer 1

您可以通过覆盖输入value属性的 setter 函数来实现这一点。因此，每次有人以value编程方式设置时，您的覆盖设置器都会被触发：

const input = document.getElementById('input');

const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');

Object.defineProperty(input, 'value', {

    set: function(t) {

        console.log('Input value was changed programmatically');

        return descriptor.set.apply(this, arguments);

    },

    get: function() {

      return descriptor.get.apply(this);

    }

});

function changeInput() {

  input.value += '1';

}

<input id="input">

<button onclick="changeInput()">Change</button>

Answer 2

要以编程方式触发事件，您可以使用事件 API：https : //developer.mozilla.org/fr/docs/Web/API/EventTarget/dispatchEvent

完整示例：

let input = document.getElementById('a')

// Listen the event

input.addEventListener('change', function (evt) {

   console.log('onchange event listener')

});

input.onchange = () => {

console.log('onchange callback')

}

setTimeout(() => {

input.value = "myvalue"

// Trigger the event

var event = new Event('change');

input.dispatchEvent(event);

}, 1000)

<input id="a">

Answer 3

对于以编程方式更改输入标签中的值，您可以使用triggers.

$(document).on('mytrigger keyup', '#input_num', function() {

  var value = $('#input_num').val();

  //alert(value);

  $('#result').val(value)

})

function external_modifier(){

  setTimeout(function(){

    var intValue = parseInt($('#input_num').val(), 10);

    $('#input_num').val(intValue+1).trigger("mytrigger");

    //alert(intValue);

    external_modifier();

  }, 3000);

}

external_modifier();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<lable> Input: </lable><input id='input_num' type=text value=1 />

<br><br>

<lable> Result: </lable><input id='result' type=text disabled />