Question

我有一个浮动标签脚本。该脚本工作正常，除非从php中提取值时，值和标签重叠并在加载页面时彼此叠加。这是我的HTML：

<div class="top-row">
  <div class="field-wrap">
    <div class="controls">
      <input type="text" class="floatLabel" name="property_address" value="<?php echo $address?>" required>
      <label for="property_address">Street Address</label>
    </div>
  </div>
  <div class="field-wrap">
    <div class="controls">
      <input type="text" class="floatLabel" name="property_city" value="<?php echo $city?>" required>
      <label for="property_city">City</label>
    </div>
  </div>
</div>

下面是我上传的脚本。加载页面时，标签和值相互重叠，但是当我单击输入时，标签会浮动。这对用户来说不是一个好的演示。我想让标签在有值时自动浮动。如何更改代码以使其有效？

(function($){
    function floatLabel(inputType){
        $(inputType).each(function(){
            var $this = $(this);
            // on focus add cladd active to label
            $this.focus(function(){
                $this.next().addClass("active");
            });
            //on blur check field and remove class if needed
            $this.blur(function(){
                if($this.val() === '' || $this.val() === 'blank'){
                    $this.next().removeClass();
                }
            });
        });
    }
    // just add a class of "floatLabel to the input field!"
    floatLabel(".floatLabel");
})(jQuery);

这是我的css：

.controls label.active {
    top: -15px;
    color: #555;
    background-color: white;
}

.controls label {
    position: absolute;
    left: 10px;
    top: 7px;
    color: #999;
    font-size: 18px;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0;
    font-weight: 400;
    background-color: rgba(255, 255, 255, 0);
    pointer-events: none;
    -moz-transition: color 0.3s, top 0.3s, background-color 0.8s;
    -o-transition: color 0.3s, top 0.3s, background-color 0.8s;
    -webkit-transition: color 0.3s, top 0.3s, background-color 0.8s;
    transition: color 0.3s, top 0.3s, background-color 0.8s;
}

Answer 1

您需要检查页面加载时是否浮动，因为可能会在服务器的字段中放置数据。

(function($){
   var $fields = $(".floatLabel");

   // when data is entered...
   $fields.on("input", floatLabel);

   // Check the text fields as soon as the document loads for data that 
   // may have been added upon load
   floatLabel();
   
   function floatLabel(){
     $fields.each(function(i, f){
       var $field = $(f);
       if($field.val().trim() === "" || $field.val() === "blank"){
         $field.next().removeClass("active");
       } else {
         $field.next().addClass("active");
       }
     });
   }
    
})(jQuery);

.controls label.active {
    position:relative;
    top: -50px;
    left:-175px;
    color: #555;
    background-color: white;
}

.controls label {
    position: relative;
    top:0px;
    left:-175px;
    color: #999;
    font-size: 18px;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0;
    font-weight: 400;
    background-color: rgba(255, 255, 255, 0);
    pointer-events: none;
    transition: color 0.3s, top 0.3s, background-color 0.8s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-row">
  <div class="field-wrap">
    <div class="controls">
      <input type="text" class="floatLabel" name="property_address" value="<?php echo $address?>" required>
      <label for="property_address">Street Address</label>
    </div>
  </div>
  <div class="field-wrap">
    <div class="controls">
      <input type="text" class="floatLabel" name="property_city" value="<?php echo $city?>" required>
      <label for="property_city">City</label>
    </div>
  </div>
</div>

当元素具有值时，标签不会浮动在页面加载上

1 个答案: