文本框焦点事件显示隐藏文本框内容

最新推荐文章于 2022-12-25 20:00:00 发布

积沙成塔——

最新推荐文章于 2022-12-25 20:00:00 发布

阅读量665

点赞数 1

分类专栏： JavaScript基础文章标签： Javascript

本文链接：https://blog.csdn.net/qq_45308912/article/details/121255900

版权

JavaScript DOM操作事件处理输入框默认值

关键词由CSDN通过智能技术生成

JavaScript基础专栏收录该内容

78 篇文章 0 订阅

订阅专栏

在这里插入图片描述
效果展示：

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input {
				color: #999;
			}
		</style>
	</head>
	<body>
		<input type="text" value="手机">
		<script>
			//获取元素对象
			var input = document.querySelector('input');
			//注册事件 获得焦点事件 onfocus
			input.onfocus = function() {
				if (input.value === '手机') {
					input.value = '';
				}
				//如果获得焦点就让字体颜色变深
				input.style.color='#333';
			}
			//注册事件 失去焦点事件 onblur
			input.onblur = function() {
				if (input.value==='') {
					input.value='手机';
				}
				//如果失去焦点就让字体颜色还原
				input.style.color='#999';
			}
		</script>
	</body>
</html>

积沙成塔——

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本框焦点事件显示隐藏文本框内容

效果展示：代码展示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> input { color: #999; } </style> </head> <body> <input type="text" value="手机"&gt.
复制链接

扫一扫

专栏目录