新增表单事件

最新推荐文章于 2022-05-25 16:14:06 发布

xqiitan

最新推荐文章于 2022-05-25 16:14:06 发布

阅读量164

点赞数

分类专栏： h5

本文链接：https://blog.csdn.net/xqiitan/article/details/87521263

版权

h5 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<html>
<head>
	<meta charset="utf-8">
	<title>表单新增事件</title>
</head>
<body>
<form action="">
	用户名：<input type="text" name="userName" id="userName"><br>
	手机号：<input type="tel" name="phone" id="phone"
	pattern="^1\d{10}$"><br>
	<input type="submit"><br>
</form>

<script type="text/javascript">
	/* oninput:监听当前指定元素内容的改变：只要内容变化，就触发事件*/
	document.getElementById("userName").oninput = function(){
		console.log("oninput："+this.value);
	}
	/* onkeyup:键盘弹起的时候触发：每个键的弹起都会触发一次*/
	document.getElementById("userName").onkeyup = function(){
		console.log("onkeyup："+this.value);
	}
	/* oninvalid:当验证不通过时触发事件*/
	document.getElementById("phone").oninvalid = function(){
		// 设置默认的提示信息
		this.setCustomValidity("请输入合法的11位手机号");
	}
</script>
</body>
</html>

<progress max="100" value="20"></progress><br>


<meter max= "100" min="10" high="20" low="69" value="40"> </meter><br>