javascripthtmltextfieldmaterial-design-lite

MDL floating label textfields: forcing the label to float

This HTML file is supposed to write "New text" into the the textfield when the "ADD TEXT" button is clicked. Does anyone know how to make it so that the label of the textfield floats when the button is clicked on, as opposed to doing this?

enter image description here

Thanks.

textbox.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>

textbox.js

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

  • You need to "focus" (reference) on the input first to have the proper animation from Material Design and since it's expected to have the is-dirty class you also need to add it to the parent.

     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;
}