web网页设计 JavaScript 搜索框代码

最新推荐文章于 2024-06-07 19:03:53 发布

Wantfly9951

最新推荐文章于 2024-06-07 19:03:53 发布

阅读量7.5k

点赞数 15

分类专栏： web网页设计文章标签： web网页设计 JavaScript 初学者

本文链接：https://blog.csdn.net/Wantfly9951/article/details/103529533

版权

web网页设计专栏收录该内容

13 篇文章 0 订阅

订阅专栏

初学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>