<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
用户名:<input type="text" name="userName" id="userName">
电话:<input type="tel" name="userTel" id="userTel" pattern="^1\d{10}$">
<input type="submit">
</form>
<script>
// oninput:监听当前指定元素内容的改变,只要内容改变(添加内容、删除内容),就会触发这个事件内的function
document.getElementById("userName").oninput=function(){
console.log("By oninput"+this.value);
}
// onkeyup:键盘弹起的时候触发:每个键弹起一次触发一次
document.getElementById("userName").onkeyup=function(){
console.log("By onkeyup"+this.value);
}
// oninput和onkeyup的区别
// ①当用鼠标操作复制粘贴时,不会触发onkeyup
// ②当用Ctrl+v粘贴时,触发一次oninput,触发两次onkeyup
</script>
</body>
</html>
申明:此参考黑马公开课笔记