标签覆盖了记录

Question

一切正常我遇到了一点问题。我有两个字段电子邮件和密码。我的电子邮件 ID 和密码保存在浏览器中。当我点击 URL 时，我会在字段中自动填写电子邮件和密码，但我的占位符会覆盖字段记录。我必须在文本字段下方显示标签。请检查下图。

(function() {
  // trim polyfill : https://developer.mozilla.org/en-      US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
  if (!String.prototype.trim) {
    (function() {
      // Make sure we trim BOM and NBSP
      var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
      String.prototype.trim = function() {
      return this.replace(rtrim, '');
    };
    })();
  }

  [].slice.call(document.querySelectorAll('input.input__field')).forEach(function(inputEl) {
  // in case the input is already filled..
    if (inputEl.value.trim() !== '') {
    classie.add(inputEl.parentNode, 'input--filled');
    }

    // events:
    inputEl.addEventListener('focus', onInputFocus);
    inputEl.addEventListener('blur', onInputBlur);
  });

  function onInputFocus(ev) {
    classie.add(ev.target.parentNode, 'input--filled');
  }

  function onInputBlur(ev) {
    if (ev.target.value.trim() === '') {
      classie.remove(ev.target.parentNode, 'input--filled');
    }
  }
})();

<script src="https://tympanus.net/Development/TextInputEffects/js/classie.js"></script>
<link href="https://tympanus.net/Development/TextInputEffects/css/normalize.css" rel="stylesheet" />
<link href="https://tympanus.net/Development/TextInputEffects/css/set2.css" rel="stylesheet" />
<link href="https://tympanus.net/Development/TextInputEffects/css/demo.css" rel="stylesheet" />

<section class="content bgcolor-4">
  <h2>Ruri</h2>
  <span class="input input--ruri">
    <input class="input__field input__field--ruri" type="email" id="input-26" />
    <label class="input__label input__label--ruri" for="input-26">
      <span class="input__label-content input__label-content--ruri">Email</span>
    </label>
  </span>
  <span class="input input--ruri">
    <input class="input__field input__field--ruri" type="password" id="input-27" />
    <label class="input__label input__label--ruri" for="input-27">
       <span class="input__label-content input__label-content--ruri">Password</span>
    </label>
  </span>
</section>

Answer 1

如果您已经自动放置了它们的每个值（假设它不是空字符串），您需要在每个 email 和 password 元素父 span.input--ruri 上添加一个类 input--filled。

$(document).ready(function() {
    var oInputEmail = $('#input-26');
    if ($.trim(oInputEmail.val()) !== '') {
       oInputEmail.parent().addClass('input--filled');
    }

    var oInputPass = $('#input-27');
    if ($.trim(oInputPass.val()) !== '') {
       oInputPass.parent().addClass('input--filled');
    }
});

这里有一个 jsfiddle 可以帮助你： http://jsfiddle.net/1Ld08fxf/

希望这对您的情况有所帮助