input输入框中oninput属性的应用
拓拔弘厚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
text-align:center;
}
h1 {
color:green;
}
</style>
<title>oninput属性的使用</title>
</head>
<body>
<h1>oninput 属性的使用</h1>
<h2>oninput是HTML5中新增的属性</h2>
<!-- 当每输入一个字符的时候,触发定义的函数 -->
在此处输入一些文字:<input type="text" id="ipt" oninput="oninputTest(this)">
<p id="pTag"></p>
<hr>
<!-- 使用了正则表达式,每输入一次就将非数组的字符替换非空白 -->
只能输入数字: <input type="text" id="ipt" oninput="value=value.replace(/[^\d]/g,'')">
<hr>
<hr>
<hr>
<!--
只允许输入 数字 和 :
其中(?!指定允许输入的符号)
-->
<input type="text" oninput="value=value.replace(/[^(?!:)\d]/g,'')">
</body>
<script>
function oninputTest(obj) {
document.getElementById("pTag").innerHTML = "输入的文字是:" + obj.value;
}
</script>
</html>
类似资料：