最近遇到需要做到把输入框提示放入输入框内部的需求。不是太复杂的东西，但大概正因如此，没有找到完整的方案，于是自己写了一个。
代码贴在后面，把几个需要注意的点放在前面吧。
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>