文本框内容的隐藏与显示（ onfocus 与 onblur ）

最新推荐文章于 2023-04-14 11:13:26 发布

时松

最新推荐文章于 2023-04-14 11:13:26 发布

阅读量574

点赞数

分类专栏：基础文章标签： javascript html css

本文链接：https://blog.csdn.net/ice_yr/article/details/106960892

版权

基础专栏收录该内容

79 篇文章 1 订阅

订阅专栏

获得焦点： onfocus

失去焦点： onblur

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input {
				color: #999999;
			}
		</style>
	</head>
	<body>
		<input type="text" name="" id="" value="文字" />
		<script type="text/javascript">
			//获取元素
			var text = document.querySelector('input');
			//获得焦点事件 onfocus
			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>