实现网页文本框显示灰色提示文字且点击后消失的一个小函数（基于jquery）

文本框提示文字效果实现

原创于 2011-07-27 07:50:43 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function

TECH 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现的文本框提示文字效果的方法。当文本框获得焦点时，提示文字会自动消失；当失去焦点且输入为空时，提示文字重新出现。这种方法可以提升用户体验，适用于各种需要提示用户的场景。


function blurInput(objName, strTip)
{
	$(objName).attr('tip', strTip).val(strTip).css({color: '#CCCCCC'});
	$(objName).focus(
		function()
		{
			$(this).css({color: '#000000'}).val("");
		}
	)
	.blur(
		function()
		{
			if ($(this).val() == "")
			{
				$(this).val($(this).attr('tip')).css({color: '#CCCCCC'});
			}
		}
	);
}

在$(document).ready中调用该函数即可让文本框显示提示文字，并在点击后消失。

如：


$(document).ready
{
	function()
	{
		blurInput('#username', '用户名');
		blurInput('#email', '邮箱地址');
	}
}