用户名和密码输入框的一种设计
by Dofy- Published:July 12th, 2007
- Comments:5 Comments
- Category:实验室
- Tags:css, html
登陆框在站点中的应用应该算最多的了, 设计中有很多种方案, 近日应用到一种输入框前面没有 label 的.
如果单纯去掉 label 将没有任何说明, 用户很可能不知道两个文本框是干嘛用的, 所以还要有提示, 怎么提示呢?
最先想到的一种方法是设置 input 的默认 value 属性, 然后在输入框获得焦点后清空 value, 失去焦点且 value 为空时恢复默认 value, 这种设计很容易实现, 但有几个弊病:
- 需要判断用户输入值是否与默认值相同, 不相同则失去焦点后不能清除 value;
- 这样带来另一个问题, 如果用户名,尤其是密码刚好与默认值相同怎么办?
- 还有个问题就是密码输入框的type属性, 如果用文字提示, 显示文字的时候密码输入框的 type 就不能是 password, 否则提示文字也会变成掩码, 那么就带来了额外的工作, 就是要转换输入框的type属性, 在我测试中貌似有兼容问题, 有的浏览器不能修改这个属性.
于是想到另外一个解决方案 ------ 背景图, 就是把提示文本做成背景, 通过控制输入框的样式来实现提示的显示与隐藏:
PLAIN TEXT >> HTML:
-
<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(input_background.png) no-repeat 0px 0px;
-
}
-
.pw_bg {
-
background: url(input_background.png) no-repeat 0px -30px;
-
}
-
</style>
-
<input type="text" class="un_bg" onfocus="setbg(this, '');" onblur="setbg(this, 'un_bg');" />
-
</p>
-
<input type="password" class="pw_bg" onfocus="setbg(this, '');" onblur="setbg(this, 'pw_bg');" />
-
</p>
-
</form>
扩展一下, 获得更好的效果 
PLAIN TEXT >> HTML:
-
<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(input_background.png) no-repeat 0px 0px;
-
}
-
.pw_bg {
-
background: url(input_background.png) no-repeat 0px -30px;
-
}
-
.fc_bg {
-
background: url(input_background.png) repeat-x 0px -60px;
-
}
-
</style>
-
<input type="text" class="un_bg" onfocus="setbg(this, 'fc_bg', 1);" onblur="setbg(this, 'un_bg', 0);" />
-
</p>
-
<input type="password" class="pw_bg" onfocus="setbg(this, 'fc_bg', 1);" onblur="setbg(this, 'pw_bg', 0);" />
-
</p>
-
</form>
