首页 > 基础资料 博客日记
JavaScript中的onblur（失去焦点）应用
2024-05-09 02:00:04基础资料围观198次
Java资料网推荐JavaScript中的onblur（失去焦点）应用这篇文章给大家，欢迎收藏Java资料网享受知识的乐趣
概要
onblur 事件会在对象失去焦点时发生。
Onblur 经常用于Javascript验证代码，一般用于表单输入框。
提示：onblur 相反事件为 onfocus 事件 。
整体知识
1.事件—通过js监听元素的行为
2.常见的事件：
2.1 鼠标事件
onclick— 鼠标左键单击事件
ondblclick— 鼠标左键双击事件
onmouseover— 鼠标移入事件
onmouseout-- 鼠标移出事件
onmousemove— 鼠标移动事件
onmousedown— 鼠标按下事件
onmouseup— 鼠标抬起事件
2.2 键盘事件
onkeydown— 键盘按下事件
onkeyup— 键盘抬起事件
onkeypress— 键盘按下事件
2.3 表单事件
onfocus-- 获取焦点事件
onblur— 失去焦点事件
onchange— 内容改变事件
oninput---- 内容改变事件
onsubmit— 提交事件
2.4 其他事件
onload— 页面加载事件
事件三要素：
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://blog.csdn.net/qiuqiule6/article/details/136130784
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！
标签：
相关文章
最新发布
点击排行
本站推荐
