显示隐藏文本框内容案例

最新推荐文章于 2024-09-15 19:46:31 发布

喝水都塞牙缝(//̀Д/́/)

最新推荐文章于 2024-09-15 19:46:31 发布

阅读量317

点赞数

分类专栏： JavaScript 文章标签： java javascript 前端

本文链接：https://blog.csdn.net/m0_59854777/article/details/121618148

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

点击输入文本框，隐藏文本框内容，并且颜色变深，输入框为空时恢复默认状态

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
    <title>显示隐藏文本框内容案例</title>	
  </head>

 <body>
       输入框：<input type="text" value="输入内容" >
        <script>
			  //显示隐藏文本框内容案例
			    var btn = document.querySelector('input');  //获取元素
			    btn.onfocus = function() {  //获得焦点事件
					if(this.value == '输入内容')  //等于默认值便改变
					    this.value = '';
				    this.style.color = '#333';  //文本框内容颜色变深
			    }  
                btn.onblur = function() {  //失去焦点事件
					if(this.value == '')
					    this.value = '输入内容';
					this.style.color = '#999';  //文本框内容颜色变浅
			    } 	
			  
		</script>
 </body>
</html>