模拟搜索框

生人勿近�

于 2020-07-09 11:04:41 发布

阅读量164

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/rskfj/article/details/107223630

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的HTML和JavaScript实现的模拟搜索框。当输入框聚焦时，预设的提示文字消失，文字颜色改变，帮助用户区分默认状态和输入状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模拟搜索框

效果展示
在这里插入图片描述
代码图片
复制如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			input{
				color: #999;
			}
		</style>
	</head>
	<body>
		<input type="text" value="手机" id="txt">
	</body>
	<script type="text/javascript">
		document.getElementById('txt').onfocus=function(){
			if(this.value=="手机"){
				this.value="";
				this.style.color="#333";
			}
		};
		document.getElementById('txt').onfocus=function(){
			if(this.value==""){
				this.value="手机";
				this.style.color="#999";
			}
		}
	</script>
</html>