文本框的框内提示

yabo

浏览: 6192 次
性别:
来自: 上海

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript Web

最近遇到需要做到把输入框提示放入输入框内部的需求。不是太复杂的东西，但大概正因如此，没有找到完整的方案，于是自己写了一个。

代码贴在后面，把几个需要注意的点放在前面吧。

1，主要逻辑就是focus和blur时要干点什么。

2，使用title属性保存提示信息，一来没有多余的东西，二来还可以获得一个停留时的提示。

3，因为IE的password输入框的type属性只读，所以使用show&hide的方式。虽说所有的地方都可以show&hide，但我还是偏好少点无用标记的方式。

4，form提交前必需做好清理工作，避免把提示当值给提交了（show&hide没有此问题，但会有没用的键值对）。这对新作的东西没啥影响，但改老代码，尤其是直接把事件绑在tag中的代码，要注意一下。

其实html5有个placeholder直接就是干这个事的，可是这还不是html5的时代。（吐槽：哪有这么好，连IE都不能不管，不然代码至少少一半。）

也考虑了一下，要不要做成JQuery的plugin，想想算了，简单的东西就简单的处理好了，真有必要了再说吧。

<!DOCTYPE html>
<html>
<head>
  <title>Hint in Box</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var textFocus = function() { // for in-box hint (username, focus)
		if (this.title && this.value === this.title) this.value = '';
	};
	$('input[type="text"]').blur(function() { // for in-box hint (username, blur)
		if (!this.value) this.value = this.title;
	}).focus(textFocus);
	var fakePassword = $('#fakePassword'),
		password = $('#password');
	if (fakePassword.length === 1) { // for in-box hint (password). It's complex because ie doesn't allow changes on the type of password.
		fakePassword.focus(function() { // focus
			fakePassword.hide();
			password.show().select();
		});
		password.blur(function() { // blur
			if (!this.value) {
				password.hide();
				fakePassword.show();
			}
		}).blur(); // blur at start to ensure the hint shows.
	}
	$('form').submit(function() { // rebind submit handler to form because we need some pre work involved with in-box hint.
		$('input[type="text"]').each(textFocus); // ensure the hint is clear.
		return checkAndSubmit(); // do the original submit.
	});
	function checkAndSubmit(){
		// some code here
		return true;
	}
});
</script>
</head>
<body>
<form name="aForm" action="/something">
	<div><input type="text" id="username" name="username" title="User ID" /></div>
	<div><input type="text" id="fakePassword" name="fakePassword" value="Password" title="Password" /><input type="password" id="password" name="password" title="Password" /></div>
	<div><input type="text" id="something" name="something" title="Something..." /></div>
	<div><input type="text" id="something1" name="something1" title="" /></div>
</form>
</body>
</html>

分享到：