HTML如何在输入框进行焦点操作，即点击输入框时提示内容消失

最新推荐文章于 2024-10-31 16:29:17 发布

原创最新推荐文章于 2024-10-31 16:29:17 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #html

本文介绍了一种在HTML中实现输入框聚焦时清除默认提示文本，并在失去焦点时恢复提示内容的方法。通过使用JavaScript的onfocus和onblur事件，可以有效提升用户体验。

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

HTML如何在输入框进行焦点操作，即点击输入框时提示内容消失，没有在输入状态时出现提示内容

一开始是这样的：
开始是这样的效果
点击输入框以后是这样的（出现一条小竖线）：

下面看代码：

<body>
	<form action="hello.html" >
		<input type="text" name="user" id="te" 
			value="请输入" onfocus="focus1();" 
			onblur="blur1();"/>
		<input type="submit" value="提交"/>
	</form>
</body>
<script type="text/javascript">
//		获得焦点
	function focus1(){
	//获得元素
		var input1 = document.getElementById("te");
		input1.value="";
	/*法二（这个可以直接写在标签的onfocus里面，
				在这个方法里面确实没什么用）*/
	//	if(this.value=='请输入'){this.value='';}
	//后面的onblur就自己补充啦，我就不写咯
	}
//		失去焦点
	function blur1(){
		var input1 = document.getElementById("te");
		input1.value="请输入";
	}
</script>

注意，此处的hello.html是同目录下的文件。

这里要说一下我遇到的一个小问题，虽说是小问题不管怎么说解决起来还得很浪费时间的。
在写js代码的时候我本来是写的方法名是focus和blur，结果不管我怎么搞，这个方法就是调用不起，你们知道是为什么吗？！
这两个词儿竟然是关键字，后来都在后面加了1，就完美的得到了我想要的效果。哎呀，第二次上了这个当，以后你们写这种命名的东西，最好还是不要把正确的单词写上去了，或者写的时候首字母大写吧，就不会向我一样浪费这美好的光阴去解决这种低级错误了。