仿淘宝输入框（JavaScript+html）

最新推荐文章于 2025-03-27 14:57:06 发布

原创最新推荐文章于 2025-03-27 14:57:06 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #css

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

该博客介绍了一个使用JavaScript和HTML5实现的仿淘宝输入框功能，具备输入时隐藏提示信息，删除内容时自动显示提示，以及点击提示信息可获取焦点的特性。

小程序的功能：在输入框里打字的时候提示信息隐藏，当删除输入内容的时候提示信息自动出现，鼠标焦点获取：点提示信息的时候同样获取焦点。

截图：

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.search{
				width: 350px;
				height: 30px;
				margin: 100px auto;
				position: relative;
				
			}
			.search input{
				width: 200px;
				height: 25px;
				
			}
			
			.search label{
				font-size: 12px;
				color: #CCCCCC;
				position: absolute;
				top: 8px;
				left: 20px;
				cursor: text;
			}
			
			
			
		</style>
		
		<script>
			window.onload=function(){
				function $(id){
					return document.getElementById(id);
				}
				
				$("txt").oninput = function(){
					
					if(this.value == ""){
						$("message").style.display="block";
					}
					else{
					$("message").style.display="none";
						
					}

				};
				
			}
	
		</script>
		
		
	</head>
	<body>
		
		<div class="search">
			<input type="text" id="txt" />
			<label for="txt" id="message">淘宝淘宝</label>
			
		</div>
	</body>
</html>