입력 값이 프로그래밍 방식으로 변경될 때 트리거 Change 이벤트?

입력 값이 프로그래밍 방식으로 변경될 때 트리거 Change 이벤트?

양식에 입력 정보가 있습니다.

<input type="text" id="changeProgramatic" onchange="return ChangeValue(this);"/>

다른 JavaScript 함수를 사용하여 이 textBox(프로그램 변경)의 값을 변경해도 변경 이벤트가 트리거되지 않습니다.(참고: 메소드에 'this'를 전달합니다.)

바닐라 JS 용액:

var el = document.getElementById('changeProgramatic');
el.value = 'New Value'
el.dispatchEvent(new Event('change'));

참고:dispatchEvent이전 IE에서는 작동하지 않습니다(참조: caniuse).따라서 사용자가 많은 웹 사이트가 아닌 내부 웹 사이트에서만 사용해야 합니다.

따라서 2019년 현재 고객/고객이 Windows XP를 사용하지 않는지 확인해야 할 수 있습니다(2019년에도 일부 고객은 여전히 사용).고객에게 이전 IE(이 경우 IE 11 이전)를 지원하지 않는다는 점을 경고하기 위해 조건부 설명을 사용할 수도 있지만, 조건부 설명은 IE9(IE10에서는 작동하지 않음)까지만 작동합니다.따라서 기능 탐지를 대신 사용하는 것이 좋습니다.예를 들어, 다음을 조기에 확인할 수 있습니다.typeof document.body.dispatchEvent === 'function'.

당신은 jQuery를 사용하고 있죠?HTML에서 JavaScript를 분리합니다.

트리거 또는 triggerHandler를 사용할 수 있습니다.

var $myInput = $('#changeProgramatic').on('change', ChangeValue);

var anotherFunction = function() {
  $myInput.val('Another value');
  $myInput.trigger('change');
};

다른 사용자가 react를 사용하는 경우 다음이 유용합니다.

https://stackoverflow.com/a/62111884/1015678

const valueSetter = Object.getOwnPropertyDescriptor(this.textInputRef, 'value').set;
const prototype = Object.getPrototypeOf(this.textInputRef);
const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
if (valueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(this.textInputRef, 'new value');
} else {
    valueSetter.call(this.textInputRef, 'new value');
}
this.textInputRef.dispatchEvent(new Event('input', { bubbles: true }));

프로그래밍 방식으로 값을 변경할 때는input이벤트, 아님change사건의

참고: 입력 이벤트는 요소의 값이 변경될 때마다 발생합니다.이는 Enter 키를 누르거나 옵션 목록에서 값을 선택하는 등 값이 커밋될 때만 실행되는 변경 이벤트와 다릅니다.

const el = document.getElementById('changeProgramatic');
el.value = 'New Value'
el.dispatchEvent(new Event('input', { 'bubbles': true }));

언급URL : https://stackoverflow.com/questions/16250464/trigger-change-event-when-the-input-value-changed-programmatically