100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > input输入框内容变化实时监听

input输入框内容变化实时监听

时间:2024-02-01 23:57:38

相关推荐

input输入框内容变化实时监听

js实现的文本框内容发生改变立马触发事件简单介绍:

本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydown或者keyup事件一样,只能够检测通过键盘输入导致内容的变化, 下面就通过代码实例做一下简单介绍。

一.相关知识准备:

1.onchange事件:

此事件会在元素内容发生改变,且失去焦点的时候触发。

浏览器支持度较好。

2.onpropertychange事件:

此事件会在元素内容发生改变时立即触发,即便是通过js改变的内容也会触发此事件。

元素的任何属性改变都会触发该事件,不止是value。

只有IE11以下浏览器支持此事件。

3.oninput事件:

此事件会在value属性值发生改变时触发,通过js改变value属性值不会触发此事件。

只有IE8以上或者谷歌火狐等标准浏览器支持。

二.代码实例:

既然知道各个事件的特性,那么我们可以通过兼容性方法,实现兼容各个浏览器的代码。

代码如下:

===================================================

<!DOCTYPE html>

<html><head><meta charset="utf-8"><meta name="author" content="/" /><title>蚂蚁部落</title><script type="text/javascript">window.onload=function(){var otxt=document.getElementById("txt");var oshow=document.getElementById("show");var count=0;if(document.all){otxt.onpropertychang

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。