MDL 浮动标签文本字段：强制标签浮动答案

【问题标题】：MDL floating label textfields: forcing the label to floatMDL 浮动标签文本字段：强制标签浮动
【发布时间】：2021-11-30 20:09:35
【问题描述】：

当单击“添加文本”按钮时，该 HTML 文件应该将“新文本”写入文本字段。有谁知道如何使文本字段的标签在单击按钮时浮动，而不是这样做？

谢谢。

文本框.html

<!--Template page for all other pages-->
<!--Based MDL items -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Textfield Demo</title>
  <!-- Import MDL libraries -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-red.min.css"/>
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <script src="js/config.js"></script>
</head>
<body>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <main class="mdl-layout__content">
      <div class="page-content">
        <div class="mdl-grid">
          <div class="mdl-cell mdl-cell--1-col"></div>
          <div class="mdl-cell--10-col" style="text-align:center; height:60vh">
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
              <input class="mdl-textfield__input" type="text" id="search-bar">
              <label class="mdl-textfield__label" for="search-bar">Text...</label>
            </div>
            <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" 
            id="button" onclick="addText()">Add Text</button><br>
          </div>
          <div class="mdl-cell mdl-cell--1-col"></div>
        </div>
      </div>
    </main>
  </div>
  <script src="textbox.js"></script>
</body>
</html>

文本框.js

function addText() {
    let searchBar = document.getElementById('search-bar');
    let text = 'New text';
    searchBar.value = text;
}

【问题讨论】：

标签： javascript html textfield material-design-lite

【解决方案1】：

您需要首先“关注” (reference) 输入，以便从 Material Design 获得正确的动画，并且由于它应该具有 is-dirty 类，因此您还需要将其添加到父级。

 function addText() {
    let searchBar = document.getElementById('search-bar');
    // These two lines:
    searchBar.focus();
    searchBar.parentElement.classList.add("is-dirty");

    let text = 'New text';
    searchBar.value = text;
}

【讨论】：

当你点击其他地方时，它仍然看起来像图片。有没有办法解决这个问题？
啊，我明白了，我刚刚更新了答案。您还需要将 is-dirty 类添加到父元素。那应该可以。