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

onchange事件在Html标记中,对于表单控件,都有onchange属性,该属性称为事件属性,主要是用来与#JavaScript#函数绑定,实现触发事件的功能。JavaScript深入编程-从0基础到深入学习线上.NET培训课程淘宝¥18购买已

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

onchange事件

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

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

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获取文本框标记中输入的值。如果文本框的值为空,则输出“用户名不能为空值。”的提示信息。完整的代码如下图所示:

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

onchange绑定JS函数

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

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

现在运行一下上面的完整代码,一下效果:

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

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

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

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

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

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

本站部分文章来自网络或用户投稿,如无特殊说明或标注,均为本站原创发布。涉及资源下载的,本站旨在共享仅供大家学习与参考,如您想商用请获取官网版权,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
投稿

win8 invalid partition table(开机提示“invalid partition table”如何解决)

2022-8-5 22:26:17

投稿

男士香水哪款好闻又持久便宜(男士香水哪款好闻又持久淡香)

2022-8-5 22:26:21

搜索