jQuery 使用label实现点击表单input，提示文字消失的示例

感兴趣的小伙伴，下面一起跟随编程之家 jb51.cc的小编来看看吧。

很多网站在填写表单的时候，都可以看到这样一种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重叠）。接下来添加样式：

/**
 * 点击表单input，提示文字消失
 *
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
.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：

/**
 * 点击表单input，提示文字消失
 *
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
$(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。