以编程方式更新时不会调用 HTML JavaScript onChange Handler

HTML JavaScript onChange Handler is not called when updated programatically

提问by php-b-grader

I have found an odd anomaly with HTML text boxes and JavaScript that I have narrowed down to being a html/javascript peculiarity and I'm hoping someone can educate me on.

我发现 HTML 文本框和 JavaScript 有一个奇怪的异常现象，我已将其缩小为 html/javascript 特性，我希望有人可以教育我。

I have downloaded and implemented a calendar plug-in that creates a simple layer with a calendar and on selection, passes the selected date back to the text box.

我已经下载并实现了一个日历插件，它创建了一个带有日历的简单图层，并在选择时将所选日期传回文本框。

What I want to do is catch when the text box changes (using onchange) and then call an Ajax function to update the database...

我想要做的是在文本框更改时捕获（使用 onchange），然后调用 Ajax 函数来更新数据库...

The problem is, onchange never gets called... I have been able to prove it with this very simple code below... When the button is clicked it changes the value which should then trigger the onchange and display an alert box...

问题是，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)">

Is this standard? Is there a workaround?

这是标准吗？有解决方法吗？

回答by michalstanko

The onchange event is not triggered by a programmatic change of the value of the textinput. You have to call the code you want to execute after you change the value yourself.

onchange 事件不是由文本输入值的编程更改触发的。您必须在自己更改值后调用要执行的代码。

回答by Luc125

The onchange event on textboxes and textarea elements only fires when the element loses focus, and if its value is now other than its value when it got focus.

textboxes 和 textarea 元素上的 onchange 事件仅在元素失去焦点时触发，并且如果它的值现在不是它获得焦点时的值。

回答by Shrimpables

This is a very old thread and the answer can be found elsewhere, but I figured I'd post it here since I found it through my research.

这是一个非常古老的线程，可以在其他地方找到答案，但我想我会在这里发布它，因为我是通过研究找到的。

The onChange call for an element can be invoked programmatically a few ways:

可以通过以下几种方式以编程方式调用元素的 onChange 调用：

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

or

或者

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

回答by joni

Onchange sdoesn't get called until the field loses focus/another editfield gets focus.

在该字段失去焦点/另一个编辑字段获得焦点之前，不会调用 Onchange sdoes。

回答by T.J. Crowder

Your best bet is to put your code for handling the change in a function (say, handleTextChange), and then call that function bothfrom the changeevent handler andwhen you make changes directly in your code.

最好的办法是把你的代码来处理的功能（比如，改变handleTextChange），然后调用该函数都从change事件处理程序，并当您直接在您的代码更改。

HTML:

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:

JavaScript：

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

---

---

Off-topicA couple of off-topic comments:

题外话一些题外话：

• Probably best to use onchange, not onChange. In HTML, it doesn't matter; in XHTML, it matters, and the reflected property on the element is alwaysall lower-case, so... And it's easier to type. :-)
• Unless you have a good reason not to, I'd recommend hooking up event handlers after the fact rather than with inline HTML attributes. Because of browser differences, this is most easily done using a library jQuery, Closure, Prototype, YUI, or any of several others, but of course anything a library can do, you can do yourself, it just may take longer and receive less testing. :-)

• 可能最好使用onchange，而不是onChange。在 HTML 中，没有关系；在 XHTML 中，这很重要，并且元素上的反射属性始终都是小写的，因此...并且更易于键入。:-)
• 除非您有充分的理由不这样做，否则我建议在事后连接事件处理程序，而不是使用内联 HTML 属性。由于浏览器的差异，这最容易使用库jQuery、Closure、Prototype、YUI或其他几个库来完成，但是当然，库可以做的任何事情，你都可以自己做，只是可能需要更长的时间并接受更少的测试. :-)

回答by Harmen

Why don't you create a custom function, like this:

你为什么不创建一个自定义函数，像这样：

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

回答by Rajat

Try this thread:

试试这个线程：

Call Javascript onchange event by programatically changing textbox value

通过以编程方式更改文本框值来调用 Javascript onchange 事件