Inline Form Labels

记事本 2010-08-04 23:17:16 累计浏览 1,802 次

标签 Inline

很多网站在填写表单的时候，都可以看到这样一种UI，input[type=text]里面有提示的文字，当鼠标点进去之后提示文字就消失了。以前做这个效果的时候都是用很笨的方法，就是把提示文字写进input的value里，然后在focus的时候去掉，在blur的时候再判断一下input的value是不是空，如果为空再把提示加上去。这样做很笨，不仅代码难看，也不符合“规范”（提示就应该是提示，不应该是input的值）。

有一天在网上发现的一种很容易的做法，下面就介绍一下。先是普通的HTML：

1
<div class="row"> 

2
  <label class="hint" for="textbox_name"> 

3
    <span>User name</span> 

4
  </label> 

5
  <input class="textbox" type="text" id="textbox_name" /> 

6
</div>

注意这里的label有一个for的属性，这个是必需的，它可以确保点击label的时候，让input获得焦点，因为之后我们要让label定位到input的上方（label与input重叠）。接下来添加样式：

01
.row { 

02
  position: relative; 

03
  padding: 1px; 

04
} 

05
.row .hint{ 

06
  opacity: 0.4; 

07
  filter:alpha(opacity=40); 

08
  padding: 4px 0 0 6px; 

09
  position: absolute; 

10
} 

11
.row .textbox { 

12
  height: 18px; 

13
  outline: none; 

14
  border: 1px solid Gray; 

15
  padding: 4px 3px 2px; 

16
  -webkit-border-radius: 2px

17
  -moz-border-radius: 2px; 

18
} 

19
.focus { 

20
  padding: 0; 

21
} 

22
.focus .textbox { 

23
  border: 2px solid #7B8AAC; 

24
}

这样label就和input重叠起来了。

然后处理用户的操作，当input获得焦点的时候，让label隐藏，失去焦点的时候需要判断一下input的value是不是空值，如果是空值就让label显示出来，下面是JavaScript：

01
$(function() { 

02
  $(".textbox").focus(function() { 

03
    var self = $(this); 

04
    self.closest(".row").addClass("focus"); 

05
    self.prev().css("display", "none"); 

06
  }).blur(function() { 

07
    var self = $(this); 

08
    self.closest(".row").removeClass("focus"); 

09
    if(self.val() == "") { 

10
      self.prev().css("display", "inline"); 

11
    } 

12
  }); 

13
});

为了方便，这里用到了jQuery。

建议继续学习

Inline Form Labels（2）（累计阅读 2,924）