Question

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

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

我想要做的是在文本框更改时使用onchange（使用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)">

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

Answer 1

onchange事件不是由textinput值的程序化更改触发的。在自己更改值之后，必须调用要执行的代码。

Answer 2

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

Answer 3

试试这个帖子：

Call Javascript onchange event by programatically changing textbox value

Answer 4

为什么不创建自定义函数，如下所示：

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

Answer 5

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

Answer 6

最好的办法是将代码用于处理函数中的更改（例如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，Closure，Prototype，YUI或any of several others最容易做到这一点，但当然任何库都是如此可以做，你可以自己做，它可能需要更长的时间，并接受更少的测试。： - ）

Answer 7

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

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

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

或

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

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

7 个答案: