input的onchange事件实际触发条件与解决方法(onchange和oninput事件)

onchange事件

在Html标记中，对于表单控件，都有onchange属性，该属性称为事件属性，主要是用来与#JavaScript#函数绑定，实现触发事件的功能。

JavaScript深入编程-从0基础到深入学习 线上.NET培训课程淘宝¥18购买已下架

onchange事件的功能是所在的表单控件的值发生了改变，则就会触发该事件，触发事件后就会去执行与之绑定的JavaScript代码。

onchange事件的基本语法如下：

onchange=“JavaScript函数或代码”;

下面在Visual Studio 2019中创建一个Html文件，并编写如下代码，实现对文本框的非空验证。

<script>function isEmptyString(str) { if (str.value == "") { document.write("用户名不能为空值。"); } }</script><input id="Text1" type="text" onchange="isEmptyString(this)" />

这是核心代码，说明如下：

在input表单标记上使用了onchange事件属性。绑定的事件是isEmptyString()函数，此函数是使用JavaScript代码编写的。在isEmptyString()函数中传入的参数是this，这里的this表示当前所在的input元素，是在Html DOM中查找的。以对象的形式传入到isEmptyString()函数中。然后在isEmptyString()函数代码中，使用了str.value获取文本框标记中输入的值。如果文本框的值为空，则输出“用户名不能为空值。”的提示信息。完整的代码如下图所示：

onchange绑定JS函数

在这里，一定要注意，onchange事件绑定的函数一定要存在，且是在input标记加载之前该JS函数已存在。

JS函数可以是在Html代码中，也可以是以独立的*.js文件引用的。

现在运行一下上面的完整代码，一下效果：

此页面是第一运行出来的结果，文本框中的值是空值，输入一些文本内容，虽然触发了onchange事件，但是没有满足条件，所以没有输出任何内容。

现在将文本框中输入的内容删除掉，一下结果：

当文本框中的内容全部删除之后，在页面上单击一下鼠标指针，则就会触发onchange事件，执行了isEmptyString()函数中的代码。

总结：对于onchange事件，触发的条件是html标记的值发生了改变，只要一改变，就会触发，且触发时，需要光标在页面上单击一下，表示文本内容修改完了，因为修改时，可能一下子会修改多个文字，因此，需要单击一下表示修改完成了，可以触发onchange事件了。