很多网站在填写表单的时候,都可以看到这样一种UI,input[type=text]里面有提示的文字,当鼠标点进去之后提示文字就消失了。以前做这个效果的时候都是用很笨的方法,就是把提示文字写进input的value里,然后在focus的时候去掉,在blur的时候再判断一下input的value是不是空,如果为空再把提示加上去。这样做很笨,不仅代码难看,也不符合“规范”(提示就应该是提示,不应该是input的值)。
有一天在网上发现的一种很容易的做法,下面就介绍一下。先是普通的HTML:
<div class="row"> <label class="hint" for="textbox_name"> <span>User name</span> </label> <input class="textbox" type="text" id="textbox_name" /> </div>
注意这里的label有一个for的属性,这个是必需的,它可以确保点击label的时候,让input获得焦点,因为之后我们要让label定位到input的上方(label与input重叠)。接下来添加样式:
.row { position: relative; padding: 1px; } .row .hint{ opacity: 0.4; filter:alpha(opacity=40); padding: 4px 0 0 6px; position: absolute; } .row .textbox { height: 18px; outline: none; border: 1px solid Gray; padding: 4px 3px 2px; -webkit-border-radius: 2px -moz-border-radius: 2px; } .focus { padding: 0; } .focus .textbox { border: 2px solid #7B8AAC; }
这样label就和input重叠起来了。
然后处理用户的操作,当input获得焦点的时候,让label隐藏,失去焦点的时候需要判断一下input的value是不是空值,如果是空值就让label显示出来,下面是JavaScript:
$(function() { $(".textbox").focus(function() { var self = $(this); self.closest(".row").addClass("focus"); self.prev().css("display", "none"); }).blur(function() { var self = $(this); self.closest(".row").removeClass("focus"); if(self.val() == "") { self.prev().css("display", "inline"); } }); });
为了方便,这里用到了jQuery。
Pingback引用通告: Inline Form Labels(2) | 记事本
Pingback引用通告: » Inline Form Labels » UED TEAM
😛 直接写在 input 里面也很好瓦