无法在Firefox中使用Materialize 1.0.0键入密码输入字段

时间:2019-01-07 19:15:49

标签: css forms firefox passwords materialize

当我将重点放在表单内的密码字段上时,active类将添加到label标记中,但是会自动删除,并且我无法在该字段中键入< / strong>。在Firefox(64.0)中会发生这种情况,而在Chrome(71.0.3578.98)中不会发生。

这是表格的html

<form id="signup-form">
  <div class="input-field">
    <input type="email" id="signup-email" required />
    <label for="signup-email">Email address</label>
  </div>
  <div class="input-field">
    <input type="password" id="signup-password" required />
    <label for="signup-password">Choose password</label>
  </div>
  <button class="btn yellow darken-2 z-depth-0">Sign up</button>
</form>

修改:添加完整的代码段

这是一个更完整的代码示例(您可能希望以全页模式查看它),登录和注册模式形式都存在他的问题:

// setup materialize components
document.addEventListener('DOMContentLoaded', function() {

  var modals = document.querySelectorAll('.modal');
  M.Modal.init(modals);

  var items = document.querySelectorAll('.collapsible');
  M.Collapsible.init(items);

});
<!-- <!DOCTYPE html> -->
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <title>Game Guides</title>

</head>

<body class="grey lighten-3">

  <!-- NAVBAR -->
  <nav class="z-depth-0 grey lighten-4">
    <div class="nav-wrapper container">
      <a href="#" class="brand-logo">

      </a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li class="logged-in">
          <a href="#" class="grey-text modal-trigger" data-target="modal-account">Account</a>
        </li>
        <li class="logged-in">
          <a href="#" class="grey-text" id="logout">Logout</a>
        </li>
        <li class="logged-in">
          <a href="#" class="grey-text modal-trigger" data-target="modal-create">Create Guide</a>
        </li>
        <li class="logged-out">
          <a href="#" class="grey-text modal-trigger" data-target="modal-login">Login</a>
        </li>
        <li class="logged-out">
          <a href="#" class="grey-text modal-trigger" data-target="modal-signup">Sign up</a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- SIGN UP MODAL -->
  <div id="modal-signup" class="modal">
    <div class="modal-content">
      <h4>Sign up</h4><br />
      <form id="signup-form">
        <div class="input-field">
          <input type="email" id="signup-email" required />
          <label for="signup-email">Email address</label>
        </div>
        <div class="input-field">
          <input type="password" id="signup-password" required class="validate" />
          <label for="signup-password">Choose password</label>
        </div>
        <button class="btn yellow darken-2 z-depth-0">Sign up</button>
      </form>
    </div>
  </div>

  <!-- LOGIN MODAL -->
  <div id="modal-login" class="modal">
    <div class="modal-content">
      <h4>Login</h4><br />
      <form id="login-form">
        <div class="input-field">
          <input type="email" id="login-email" required />
          <label for="login-email">Email address</label>
        </div>
        <div class="input-field">
          <input type="password" id="login-password" required />
          <label for="login-password">Your password</label>
        </div>
        <button class="btn yellow darken-2 z-depth-0">Login</button>
      </form>
    </div>
  </div>

  <!-- ACCOUNT MODAL -->
  <div id="modal-account" class="modal">
    <div class="modal-content center-align">
      <h4>Account details</h4><br />
      <div class="account-details"></div>
    </div>
  </div>

  <!-- CREATE GUIDE MODAL -->
  <div id="modal-create" class="modal">
    <div class="modal-content">
      <h4>Create Guide</h4><br />
      <form id="create-form">
        <div class="input-field">
          <input type="text" id="title" required>
          <label for="title">Guide Title</label>
        </div>
        <div class="input-field">
          <textarea id="content" class="materialize-textarea" required></textarea>
          <label for="content">Guide Content</label>
        </div>
        <button class="btn yellow darken-2 z-depth-0">Create</button>
      </form>
    </div>
  </div>

  <!-- GUIDE LIST -->
  <div class="container" style="margin-top: 40px;">
    <ul class="collapsible z-depth-0 guides" style="border: none;">
      <li>
        <div class="collapsible-header grey lighten-4">Guide title</div>
        <div class="collapsible-body white">Lorem ipsum dolor sit amet.</div>
      </li>
      <li>
        <div class="collapsible-header grey lighten-4">Guide title</div>
        <div class="collapsible-body white"><span>Lorem ipsum dolor sit amet.</span></div>
      </li>
      <li>
        <div class="collapsible-header grey lighten-4">Guide title</div>
        <div class="collapsible-body white"><span>Lorem ipsum dolor sit amet.</span></div>
      </li>
      <li>
        <div class="collapsible-header grey lighten-4">Guide title</div>
        <div class="collapsible-body white"><span>Lorem ipsum dolor sit amet.</span></div>
      </li>
    </ul>
  </div>

  <script src="https://www.gstatic.com/firebasejs/5.7.2/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.7.2/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.7.2/firebase-firestore.js"></script>
  <script>
    // Initialize Firebase
  </script>
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
  </script>

</body>

0 个答案:

没有答案