实现H5中的placeholder功能

最新推荐文章于 2024-10-15 14:04:17 发布

天空守护云

最新推荐文章于 2024-10-15 14:04:17 发布

阅读量475

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44606660/article/details/87779573

本文介绍了一种使用HTML和JavaScript实现输入框预填充文本和样式的技巧，包括如何设置默认文本，以及如何在用户点击或键盘操作时清除默认文本并改变字体颜色。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<label for="">用户名：</label><input type="text" id="ipt">
	<script type="text/javascript">
		var ipt=document.getElementById('ipt');
		ipt.value="请输入用户名";
		ipt.style.color='gray';
		ipt.onclick=function(){
			if (this.value=="请输入用户名") {
				this.selectionStart=0;
				this.selectionEnd=0;
			}
		}
		ipt.onkeydown=function(){
			if (this.value=="请输入用户名") {
				this.value="";
				this.style.color='#000';
			}
		};
		ipt.onkeyup=function(){
			if (this.value.length==0) {
				this.value="请输入用户名";
				this.style.color='gray';
				this.selectionStart=0;
				this.selectionEnd=0;
			}
		}
</script>
</html>