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

我有一个浮动标签脚本。该脚本工作正常，除非从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>

这是我的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;
}

---

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

作用${ 变量$fields=$.floatLabel； //输入数据时。。。 $fields.oninput，floatLabel； //文档加载后立即检查文本字段，以查找 //可能是在装载时添加的 浮动标签； 函数浮动标签{ $fields.eachfunction i，f{ 变量$field=$f； 如果$field.val.trim==| |$field.val==空白{ $field.next.removeClassactive； }否则{ $field.next.addClassactive； } }; } }jQuery； .controls.label.active{ 位置：相对位置； 顶部：-50px； 左：-175px； 颜色：555； 背景色：白色； } .控件标签{ 位置：相对位置； 顶部：0px； 左：-175px； 颜色：999； 字号：18px； 显示：内联块； 左侧填充：5px； 右侧填充：5px； 保证金：0； 字体大小：400； 背景色：rgba255、255、255、0； 指针事件：无； 过渡色：颜色0.3s，顶部0.3s，背景色0.8s； }

---

请包括CSS。嗨，我刚刚做了。谢谢。@ubuntujavy我对你的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;
}