js显示隐藏文本框内容

最新推荐文章于 2024-05-23 10:19:28 发布

DT?13?FM

最新推荐文章于 2024-05-23 10:19:28 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/qq_45902653/article/details/118488670

版权

这个示例展示了如何使用JavaScript处理输入框的焦点和失去焦点事件。当输入框获得焦点时，如果其初始值为'手机'，则清空内容并改变字体颜色；失去焦点时，若内容为空，则恢复初始值'手机'和灰色字体颜色。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示隐藏文本框内容</title>
    <style>
		input{
			color:#999;
			}
	</style>
	</head>
	<body>
	<input type="text" value="手机">
	<script>
		var text=document.querySelector("input");
		text.onfocus=function(){
			if(this.value==="手机"){
				this.value="";
		}
		this.style.color="#333";
		}
		text.onblur=function(){
			if(this.value===""){
				this.value="手机";
			}
			this.style.color="#999";
		}
		
	</script>
	</body>
</html>