Ice.Crystal

由 七彩crystal 撰写 　http://www.7crystal.com/2008/08/%e7%94%a8%e6%88%b7%e5%90%8d%e5%92%8c%e5%af%86%e7%a0%81%e8%be%93%e5%85%a5%e6%a1%86%e7%9a%84%e4%b8%80%e7%a7%8d%e8%ae%be%e8%ae%a1by-dofy/

登陆框在站点中的应用应该算最多的了, 设计中有很多种方案, 近日应用到一种输入框前面没有 label 的.
如果单纯去掉 label 将没有任何说明, 用户很可能不知道两个文本框是干嘛用的, 所以还要有提示, 怎么提示呢?
最先想到的一种方法是设置 input 的默认 value 属性, 然后在输入框获得焦点后清空 value, 失去焦点且 value 为空时恢复默认 value, 这种设计很容易实现, 但有几个弊病:

需要判断用户输入值是否与默认值相同, 不相同则失去焦点后不能清除 value;
这样带来另一个问题, 如果用户名,尤其是密码刚好与默认值相同怎么办?
还有个问题就是密码输入框的type属性, 如果用文字提示, 显示文字的时候密码输入框的 type 就不能是 password, 否则提示文字也会变成掩码, 那么就带来了额外的工作, 就是要转换输入框的type属性, 在我测试中貌似有兼容问题, 有的浏览器不能修改这个属性.
于是想到另外一个解决方案 —— 背景图, 就是把提示文本做成背景, 通过控制输入框的样式来实现提示的显示与隐藏:
<script type="text/javascript">
function setbg(obj, cname){
if(obj.value != ''){
obj.className = '';
}else{
obj.className = cname;
}
}
</script>
<style type="text/css">
input {
font: 12px "Courier New", Courier, monospace;
border: 1px solid #666666;
padding: 3px;
height: 23px;
}
.un_bg {
background: url(/upload/2008-08-26/input_background.png) no-repeat 0px 0px;
}
.pw_bg {
background: url(/upload/2008-08-26/input_background.png) no-repeat 0px -30px;
}
</style>
<form>
<p>
<input type="text" class="un_bg" onfocus="setbg(this, '');" onblur="setbg(this, 'un_bg');" />
</p>
<p>
<input type="password" class="pw_bg" onfocus="setbg(this, '');" onblur="setbg(this, 'pw_bg');" />
</p>
</form>

扩展一下, 获得更好的效果
<script type="text/javascript">
function setbg(obj, cname, isfocus){
if(obj.value != ''){
obj.className = isfocus?'fc_bg':'';
}else{
obj.className = cname;
}
}
</script>
<style type="text/css">
input {
font: 12px "Courier New", Courier, monospace;
border: 1px solid #666666;
padding: 3px;
height: 23px;
}
.un_bg {
background: url(/upload/2008-08-26/input_background.png) no-repeat 0px 0px;
}
.pw_bg {
background: url(/upload/2008-08-26/input_background.png) no-repeat 0px -30px;
}
.fc_bg {
background: url(/upload/2008-08-26/input_background.png) repeat-x 0px -60px;
}
</style>
<form>
<p>
<input type="text" class="un_bg" onfocus="setbg(this, 'fc_bg', 1);" onblur="setbg(this, 'un_bg', 0);" />
</p>
<p>
<input type="password" class="pw_bg" onfocus="setbg(this, 'fc_bg', 1);" onblur="setbg(this, 'pw_bg', 0);" />
</p>
</form>