input與textarea實時監控，原生JS與JQ兩種方法
阿新 • • 發佈：2018-12-23
之前一直在用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 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>