<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
用户名：<input type="text" name="userName" id="userName"><br>
电话：<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"> <br>
<input type="submit">
</form>
<script>
/*1.oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件*/
document.getElementById("userName").οninput=function(){
console.log("oninput:"+this.value);
}
/*onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次*/
document.getElementById("userName").οnkeyup=function(){
console.log("onkeyup:"+this.value);
}
/*oninvalid:当验证不通过时触发*/
document.getElementById("userPhone").oninvalid=function(){
/*设置默认的提示信息*/
this.setCustomValidity("请输入合法的11位手机号");
}
/*this是获取当前信息*/
</script>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
