Обработчик HTML JavaScript onChange не вызывается при программном обновлении

Я обнаружил странную аномалию с текстовыми полями HTML и JavaScript, которую я сузил до особенности html/javascript, и я надеюсь, что кто-то сможет меня просветить.

Я загрузил и внедрил подключаемый модуль календаря, который создает простой слой с календарем и при выборе передает выбранную дату обратно в текстовое поле.

Что я хочу сделать, так это поймать, когда текстовое поле изменится (используя onchange), а затем вызвать функцию Ajax для обновления базы данных...

Проблема в том, что onchange никогда не вызывается... Я смог доказать это с помощью этого очень простого кода ниже... Когда кнопка нажата, она изменяет значение, которое затем должно запускать onchange и отображать окно предупреждения...

<input type="button" name="setValue" id="setValue" value="setValue" onClick="document.getElementById('textinput').value='Updated'">&nbsp;
<input type="button" name="clearValue" id="clearValue" value="clearValue" onClick="document.getElementById('textinput').value=''"><br>
<input type="text" name="textinput" id="textinput" onChange="alert(this.name)">

Это стандарт? Есть ли обходной путь?


javascript html onchange
person php-b-grader    schedule 28.10.2010    source источник
comment
@Ghommey: мой второй комментарий к вашему теперь удаленному ответу был неверным. Просто к вашему сведению.   -  person T.J. Crowder    schedule 28.10.2010
comment
возможный дубликат событие ввода Onchange не запускается в jquery   -  person Brant Bobby    schedule 13.03.2013

Ответы (6)


arrow_upward
4
arrow_downward

Событие onchange для текстовых полей и элементов textarea срабатывает только тогда, когда элемент теряет фокус и если его значение теперь отличается от его значения, когда он получил фокус.

person Luc125    schedule 12.05.2011

arrow_upward
3
arrow_downward

Событие onchange не запускается программным изменением значения textinput. Вы должны вызвать код, который хотите выполнить, после того, как сами измените значение.

person michalstanko    schedule 28.10.2010

arrow_upward
0
arrow_downward

Почему бы вам не создать пользовательскую функцию, например:

function change( val ){
    var el = document.getElementById( 'textinput' );
    el.value = val;
    alert( val );
}
person Harmen    schedule 28.10.2010

arrow_upward
0
arrow_downward

Onchange s не вызывается до тех пор, пока поле не потеряет фокус/другое поле редактирования не получит фокус.

person joni    schedule 28.10.2010

arrow_upward
0
arrow_downward

Лучше всего поместить свой код для обработки изменения в функцию (скажем, handleTextChange), а затем вызвать эту функцию оба из обработчика событий change и при выполнении изменения непосредственно в вашем коде.

HTML:

<input type="button" name="setValue" id="setValue" value="setValue" onClick="changeField('textinput', 'Updated')">&nbsp;
<input type="button" name="clearValue" id="clearValue" value="clearValue" onClick="changeField('textinput', '')"><br>
<input type="text" name="textinput" id="textinput" onChange="handleFieldChange(this)">

JavaScript:

function changeField(id, value) {
    var field = document.getElementById(id);
    if (field) {
        field.value = value;
        handleFieldChange(field);
    }
}

Не по теме Пара комментариев не по теме:

  • Вероятно, лучше использовать onchange, а не onChange. В HTML это не имеет значения; в XHTML это имеет значение, а отраженное свойство элемента всегда пишется в нижнем регистре, так что... И его легче набирать. :-)
  • Если у вас нет веских причин не делать этого, я бы рекомендовал подключать обработчики событий постфактум, а не со встроенными атрибутами HTML. Из-за различий в браузерах это проще всего сделать с помощью библиотеки jQuery, Закрытие, Прототип, YUI или любой из нескольких других, но, конечно, все, что может сделать библиотека, вы можете сделать сами, просто это может занять больше времени и требует меньшего тестирования. :-)
person T.J. Crowder    schedule 28.10.2010

arrow_upward
0
arrow_downward

Это очень старая ветка, и ответ можно найти в другом месте, но я решил опубликовать его здесь, так как нашел его в ходе своего исследования.

Вызов onChange для элемента может быть вызван программно несколькими способами:

document.getElementById("elementID").onchange();

or

var element = document.getElementById('elementID');
var event = new Event('change');
element.dispatchEvent(event);
person Shrimpables    schedule 19.06.2018