早期的输入框提示是这样的（via baidu）

tieba

左边一个 label ，右边一个输入框。

比较现代的方式是（via Discuz!）

discuz!

更漂亮的方式是（via 点点）

diandian

登录提示信息是放在输入框里面，可以减少文字干扰，我也想在自己手头的小项目中实现这种效果。

我需要达到几个要求：

  1. 提示信息是可以暂存的，即用户的输入在清空之后，还能够显示原来的提示信息
  2. 只需为 text / textarea 添加一个 class 即可实现效果
  3. 不修改 DOM 节点，避免影响上下文选择器

为了实现效果，我需要将提示信息暂存到某个地方。有3个地方可供选择： js 全局变量、输入框自定义属性、上下文 DOM 节点。

js 全局变量比较难控制元素标识，并不是每个元素都可以精准的用 id 标记；输入框自定义属性会破坏语义；在上下文加入节点会破坏 DOM 树。

权衡之后，我选择了使用 输入框自定义属性实现。

demo 在这里。

封装的方法代码如下

$('.auto_clean').blur(function() {
	if ($.trim($(this).val()) === '') {
		$(this).val($(this).attr('message'));
	}
}).focus(function() {
	if ($(this).attr('message') === undefined) {
		$(this).attr('message', $(this).val());
	}
	if ($(this).val() === $(this).attr('message')) {
		$(this).val('');
	}
});
});

使用方法如下

<input type="text" class="auto_clean" value="搜索用户" /> 
<br/> 
<textarea class="auto_clean">请在这里输入</textarea>

update2011/08/25： 感谢 @行者 提醒，使用 html5 的 placeholder 会更干净优美一些，参考见 Web Forms - Dive Into HTML5

原文链接: 简单输入提示框实现 | Log4D

3a1ff193cee606bd1e2ea554a16353ee

欢迎关注我的微信公众号：窥豹

窥豹