大家好，欢迎来到IT知识分享网。
概要
onblur 事件会在对象失去焦点时发生。
Onblur 经常用于Javascript验证代码，一般用于表单输入框。
提示：onblur 相反事件为 onfocus 事件 。
整体知识
事件三要素： 1.事件源：触发事件的元素 2.注册事件：触发的行为 3.事件处理程序：事件触发后要执行的代码 注册事件事件的方式： 方式1： 事件对象.on事件名 = function(){ 事件处理程序 } 方式2：----推荐使用 事件对象.addEventListener('事件名',function(){ 事件处理程序 }) 代码展示
下面展示一些代码片
<!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>
<style>
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(images/mess.png) no-repeat left center;
padding-left: 20px;
}
.wrong {
display: inline-block;
font-size: 12px;
color: red;
background-image: url(images/wrong.png);
}
.right {
display: inline-block;
font-size: 12px;
color: green;
background-image: url(images/right.png);
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt" />
<p class="message">请输入6~16位密码</p>
</div>
<script>
// 1.首先判断的事件是表单失去焦点 onblur
// 2.如果输入正确则提示正确的信息颜色为绿色小图标变化
// 3.如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
// 3.因为里面变化样式较多，我们采取className修改样式
let text = document.querySelector("input");
let worn = document.querySelector("p");
text.onblur = function () {
if (this.value.length >= 6 && this.value.length <= 16) {
worn.classList.remove("wrong");
worn.classList.add("right");
worn.innerHTML = "输入正确";
} else if (this.value === "") {
worn.classList.remove("wrong");
worn.classList.remove("right");
worn.innerHTML = "请输入6~16位密码";
} else {
worn.classList.remove("right");
worn.classList.add("wrong");
worn.innerHTML = "输入错误";
}
};
</script>
</body>
</html>
效果展示
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/129981.html
