web网页设计 JavaScript 搜索框代码

编程知识更新时间:2023-04-07 13:50:41

初学JavaScript，略微懂得一点毛皮，得出一点复习经验，在这里分享一下。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>搜索框</title>
</head>
<style>
#i1{
	color: grey;
}
</style>
<body>
	搜索<input type="text" value="请输入关键字" id="i1">
</body>
</html>
<script>
var ip = document.getElementById('i1');
//添加事件，获得焦点，value不为“请输入关键字”则value变为空，输入文字为黑色字体
ip.addEventListener("focus",function(){
	if (ip.value=="请输入关键字") {
	ip.value=""
	ip.style.color="black"
	}
})
// 添加事件，失去焦点时，value为空则回到默认状态
ip.addEventListener("blur",function(){
	if (ip.value=="") {
	ip.style.color="grey"
	ip.value="请输入关键字"
	}
})
// 添加事件，如果value新输入的与默认的value相同。则再次变为默认样式。
ip.addEventListener("change",function(){
	if (ip.value=="请输入关键字") {
	ip.style.color="grey"}
})
</script>