跨浏览器的jQuery表单浮动标签插件

FlowupLabels.js是一款可以兼容IE8+浏览器的实用jQuery表单浮动标签插件。该浮动标签插件可以在某个表单字段获得焦点的时候，使该表单字段的label标签滑动到输入域的上方，效果非常的酷。

使用方法

使用该w浮动标签插件需要引入jQuery，jquery.FlowupLabels.js和jquery.FlowupLabels.css文件。

<link rel="stylesheet" href="css/jquery.FlowupLabels.css" media="screen">
<script src="dist/jquery.min.js"></script>
<script src="dist/jquery.FlowupLabels.min.js"></script>               
              

HTML结构

该浮动标签的HTML结构需求如下：在你的表单元素上添加class FlowupLabels，然后将input输入域和label包裹在一个div.fl_wrap容器中，为input元素添加class fl_label，为label元素添加class fl_input。

<form id='formBody' class='FlowupLabels'>
  <div class='fl_wrap'>
    <label class='fl_label' for='rf_name'>Name:</label>
    <input class='fl_input' type='text' id='rf_name' />
  </div>
  <div class='fl_wrap'>
    <label class='fl_label' for='rf_email'>Email:</label>
    <input class='fl_input' type='email' id='rf_email' />
  </div>
  ......
</form>                
              

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该浮动标签插件。

(function(){
  $('.FlowupLabels').FlowupLabels({
    feature_onInitLoad: true, 
    class_focused:    'focused',
    class_populated:  'populated' 
  });
})();
                
              

配置参数

该浮动标签插件有3个可用的配置参数：

• feature_onInitLoad：在页面加载时处理可能有预填充的输入框。
• class_focused：输入框聚焦时的class。
• class_populated：输入框输入文本时的class。