仿京东搜索（JavaScript实现）

2023-02-03 21:28:59

效果如图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	  *{
	  	margin:0;
	  	padding:0;
	  	border:0;
	  }
	  #search{
	  	width:550px;
	  	margin:50px auto;
	  }
	  #search input{
	  	width:494px;
	  	height:33px;
	  	border:1px solid #f10215;
	  	outline-style:none;
	  	padding-left:4px;
	  	color:#BBB;
	  	font-size:14px;
	  	font-family:"微软雅黑";
	  }
	  #search button{
	  	width:50px;
	  	height:35px;
	  	color: #fff;
	  	background-color:#f10215;
	  	vertical-align:top;
	  }
	</style>
	<script>
		var keywords = "手机";
		window.onload = function(){
			var txt = document.getElementById("search").getElementsByTagName("input")[0];
			txt.value = keywords;
			txt.onfocus = function(){
				if(this.value == keywords){
					this.value = "";
					this.style.color = "#555"
				}
			}
			txt.onblur = function(){
				if(this.value == ""){
					this.value = keywords;
					this.style.color = "#BBB";
				}
			}
		}
	</script>
</head>
<body>
	<div id="search">
	  <input type="text"><button>搜索</button>
	</div>
</body>
</html>
  • 作者：院长i
  • 原文链接：https://blog.csdn.net/zp1455604302/article/details/103930651
    更新时间：2023-02-03 21:28:59