1

我用 Material Design 组件制作了一个表格。

我的 TextField 浮动标签在 AutoFill 填充输入时浮动，但在用户输入时不会浮动。

function fillFields() {
  $("#passwordTextField").val("test");
  $("#usernameTextField").val("test");
}
p.highlight-red-on-error {
  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

div.mdc-text-field--invalid~p.highlight-red-on-error {
  color: #b00020;
}
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<body>

  <div>
    <div class="mdc-text-field">
      <input type="text" id="usernameTextField" name="username" class="mdc-text-field__input" pattern="[A-Za-z]*" required minlength=3 maxlength=32 data-mdc-auto-init="MDCTextField">
      <label for="usernameTextField" class="mdc-floating-label">Username</label>
      <div class="mdc-line-ripple"></div>
    </div>
    <p class="highlight-red-on-error">Username must be between 3 and 32 characters and contain only alphanumeric characters.</p>
  </div>


  <br>

  <!-- password field -->
  <div>
    <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
      <input type="password" id="passwordTextField" name="password" class="mdc-text-field__input" pattern="[A-Za-z!%^&*$?~`=+-_()]*" required minlength=8>
      <label for="passwordTextField" class="mdc-floating-label">Password</label>
      <div class="mdc-line-ripple"></div>
    </div>
    <p class="highlight-red-on-error">Password must be at least 6 characters. Some special charcaters are not allowed</p>
  </div>

  <p>
    Typing in the fields doesn't float the labels, but using autofill does.
  </p>
  <button onClick="fillFields()">Fill fields (doesn't float labels)</button>

  <script>
    window.mdc.autoInit();
    // from https://github.com/material-components/material-components-web/tree/master/packages/mdc-auto-init#using-as-part-of-material-components-web
  </script>
</body>

如您所见，既不通过 JavaScript 编辑字段，也不输入它们会使标签浮动。只有使用自动填充。此外，autoInit();似乎不起作用。

4

2 回答 2

4

我发现autoInit();由于某种原因 using 不起作用，所以我不得不手动初始化组件。

TextFields 的一个示例（使用 jQuery）是：

$('.mdc-text-field').each(function (i, obj) {
    mdc.textField.MDCTextField.attachTo(obj);
});

上面的代码将正确的属性和方法等应用于该类的所有项目mdc-text-field

于 2018-08-25T21:13:37.047 回答
0

我相信必须将 data-mdc-auto-init 添加到顶级 mdc-text-field 而不是输入字段。我自己遇到了这个并将其添加到顶层并在页面上的 onload 事件解决问题后调用 mdc.autoInit() 。

于 2020-06-09T00:16:15.707 回答