JS练习---搜索框聚焦和失焦_js聚焦失焦-CSDN博客

本文链接：https://blog.csdn.net/qq_44864833/article/details/122546476

练习：

针对搜索框，当进行文本输入时，文本提示内容消失，当没有输入文本时，文本提示出现。

目标效果展示：
在这里插入图片描述

1. js实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/common.js" type="text/javascript" charset="utf-8"></script>
	</head>
	
	<body>
		<input type="text" name="search" id="search" value="请输入内容" />
		<script type="text/javascript">
			//当文本框获取焦点时候，清空文本框，失去焦点时，还原文本框原来的值
			var search = document.getElementById("search");
			search.onfocus = function(){
				if(this.value=="请输入内容"){
					this.value="";
				}
			}
			
			search.onblur = function(){    //onblur 离焦事件
				if(this.value!="请输入内容"){
					this.value="请输入内容";
				}
			}
					
		</script>
	</body>
</html>

关键字解释：
onfocus ：表单事件中，元素获取焦点时触发
onblur：表单事件中，元素失去焦点时触发

2.直接用input中placeholder属性

<input type="text" name="search" id="search" placeholder="请输入内容" />

存在细微区别，主要是锻炼使用js的能力.