【前端JS】input textarea 默认文字，点击消失

最新推荐文章于 2023-12-21 14:35:07 发布

千山牧雪

最新推荐文章于 2023-12-21 14:35:07 发布

阅读量5.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB前端文章标签： javascript css input textarea 默认文字

本文链接：https://blog.youkuaiyun.com/u011704894/article/details/46458881

WEB前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种在前端页面中实现input输入框默认提示文字的方法。通过HTML、CSS及JavaScript，可以创建一种视觉效果，当输入框获得焦点时默认文字消失，失去焦点且为空时默认文字再次出现。

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

如题，前端页面的 input textarea 有时候需要显示默认文字以提示用户，以下为实现代码，以 input 为例，textarea 可以直接搬用

HTML

<input type="text" id="content" name="content" value="请输入内容"/>

CSS

<style type="text/css">
	#content{color:#ccc; }
</style>

JavaScript

<script>		
		$("#content").focus(function(){
			if(this.value == this.defaultValue) {
				this.value='';
				$(this).css('color','#000');
			}
		});
		
		$("#content").blur(function(){
			if(this.value == '') {
				this.value=this.defaultValue;
				$(this).css('color','#ccc');
			}
		});
	});
</script>

End .