获得焦点和失去焦点事件的应用

最新推荐文章于 2024-02-08 12:55:59 发布

在下，杨江河

最新推荐文章于 2024-02-08 12:55:59 发布

阅读量171

点赞数

分类专栏： Mac开发文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Rockandrollman/article/details/128637280

版权

Mac开发专栏收录该内容

294 篇文章 3 订阅

订阅专栏

该代码示例展示了如何利用HTML的焦点(onfocus)和失去焦点(onblur)事件，结合JavaScript进行输入验证。当输入框获取焦点时，显示提示信息；失去焦点后，检查手机号码是否为11位，根据验证结果改变提示信息的样式和内容。

摘要由CSDN通过智能技术生成

描述

获得焦点和失去焦点事件的应用

代码

.info{
	color:#888888;
}

.error{
	color: red;
}

.right{
	color: white;
	background-color: greenyellow;
	display: inline-block;
	height: 20px;
	width: 20px;
	border-radius: 20px;
}

function show(){
	document.getElementById("info").innerHTML="请输入11位手机号";
	document.getElementById("info").className="info";
}

function check(obj){
	var tel = obj.value;
	if(tel.length == 11){
		document.getElementById("info").innerHTML="nice";
		document.getElementById("info").className="right";
	}else{
		document.getElementById("info").innerHTML="长度为11位";
		document.getElementById("info").className="error";
	}
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/index4.js"></script>
		<link rel="stylesheet" href="css/index4.css"/>
	</head>
	<body>
		焦点事件：
		<input type="text" onfocus="show()" onblur="check(this)"/><span id="info" ></span>
	</body>
</html>