您的位置：首页 > Web前端 > JavaScript

input与textarea实时监控，原生JS与JQ两种方法

2016-03-18 17:53 435 查看

之前一直在用JQ的方法对input与textarea输入实时监控，今天在偶然下发现了原生JS的方法对input的实时监控。

废话不多说了，直接上代码。

HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input实时监控</title>
</head>
<body>
<p>该实例演示了如何使用 HTML DOM 向 input 元素中添加 "oninput" 事件。</p>

<p>向文本框中尝试输入即可触发事件。</p>

输入您的名字:  <input type="text" id="myInput" value="Mickey"><br />
输入您的名字:  <input type="text" value="Mickey"><br />
输入您的名字:  <input type="text"  value="Mickey"><br />
输入您的名字:  <input type="text" value="Mickey"><br />
</body>
</html>

JavaScript对input实时监控：

//单个监控
document.getElementById("myInput").oninput = function () {alert("点击了input")};

//全局监控
var input = document.getElementsByTagName("input");
for(var i = 0; i < input.length; i++) {
input[i].oninput = function () {alert("点击了input");}
}

Jquery对input实时监控：

//单个监控
$("#myInput").bind("input propertychange",function(){
alert("点击了input")
})

//全局监控
$("input").bind("input propertychange",function(){
alert("点击了input")
})

完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input实时监控</title>
</head>
<body>
<p>该实例演示了如何使用 HTML DOM 向 input 元素中添加 "oninput" 事件。</p>

<p>向文本框中尝试输入即可触发事件。</p>

输入您的名字:  <input type="text" id="myInput" value="Mickey"><br />
输入您的名字:  <input type="text" value="Mickey"><br />
输入您的名字:  <input type="text"  value="Mickey"><br />
输入您的名字:  <input type="text" value="Mickey"><br />
<script type="text/javascript">
/*******JavaScript******/
//单个监控
//document.getElementById("myInput").oninput = function () {alert("点击了input")};

//全局监控
/*var input = document.getElementsByTagName("input");
for(var i = 0; i < input.length; i++) {
input[i].oninput = function () {alert("点击了input");}
}*/

/*******Jquery******/
//单个监控
/*$("#myInput").bind("input propertychange",function(){
alert("点击了input")
})*/

//全局监控
/*$("input").bind("input propertychange",function(){
alert("点击了input")
})*/
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航