表单重置折叠表单本身内的标签

Question

我一直在用物化 CSS 设计一个网站。 我的问题是，当我使用嵌入在重置按钮中的内置表单重置方法时，标签在表单内折叠。 仅当表单内有一个值被重置时才会发生这种情况。 当我单击表单时，它会恢复到正常状态。 有谁知道为什么会发生这种情况以及如何解决它？或者也许我可以在没有这种行为的情况下重置表单的另一种形式？ 提前致谢。 Bugged form Form before reset button being clicked

<form id="two_player">
            <div class="row">
              <div class="input-field col s6">
                <label for="two_player_one">Jogador 1:</label>
                <input placeholder="Apelido do jogador 1" id="two_player_one" type="text" class="validate" required>
              </div>
              <div class="input-field col s6">
                <input placeholder="Apelido do jogador 2" id="two_player_two" type="text"  class="validate" required>
                <label for="two_player_two">Jogador 2:</label>
              </div>
          </div>
            <div class="row">
              <div class="input-field col s6">
                <input placeholder="Número de cartas da 1ª rodada" id="two_player_one_round_one" type="number" min="0" max="13" class="validate" required>
                <label for="two_player_one_round_one">Rodada 1:</label>
              </div>
              <div class="input-field col s6">
                <input placeholder="Número de cartas da 1ª rodada" id="two_player_two_round_one" type="number" min="0" max="13" class="validate" required>
                <label for="two_player_two_round_one">Rodada 1:</label>
              </div>
          </div>
          <div class="row">
            <div class="input-field col s6">
              <input placeholder="Número de cartas da 2ª rodada" id="two_player_one_round_two" type="number" min="0" max="13" class="validate" required>
              <label for="two_player_one_round_two">Rodada 2:</label>
            </div>
            <div class="input-field col s6">
              <input placeholder="Número de cartas da 2ª rodada" id="two_player_two_round_two" type="number" min="0" max="13" class="validate" required>
              <label for="two_player_two_round_two">Rodada 2:</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s6">
              <input placeholder="Número de cartas da 3ª rodada" id="two_player_one_round_three" type="number" min="0" max="13" class="validate" required>
              <label for="two_player_one_round_three">Rodada 3:</label>
            </div>
            <div class="input-field col s6">
              <input placeholder="Número de cartas da 3ª rodada" id="two_player_two_round_three" type="number" min="0" max="13" class="validate" required>
              <label for="two_player_two_round_three">Rodada 3:</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s6">
              <input placeholder="Número de cartas da 4ª rodada" id="two_player_one_round_four" type="number" min="0" max="13" class="validate" required>
              <label for="two_player_one_round_four">Rodada 4:</label>
            </div>
            <div class="input-field col s6">
              <input placeholder="Número de cartas da 4ª rodada" id="two_player_two_round_four" type="number" min="0" max="13" class="validate" required>
              <label for="two_player_two_round_four">Rodada 4:</label>
            </div>
          </div>
            <div class="row">
              <div class="input-field col s12">
                <input type="text" class="datepicker" id="date1">
                <label for="date1">Qual a data da partida?</label>
              </div>
            </div>
          <div class="center-align">
          <div class="row">
              <button type="submit" class="btn grey lighten-1">Enviar</button>
              <button type="reset" class="btn grey lighten-1">Limpar</button>
          </div>
        </div>
          </form>

Answer 1

在 Materializecss 中，当输入有内容或被聚焦时，标签会添加一个“活动”类。这会将标签向上移动、缩小并着色。当您通过 javacript 弄乱 dom 时，输入不知道更改。要手动“重置”输入，您需要将“活动”类添加到任何具有内容（或占位符）的输入。

$("label").addClass('active');

在下面的笔中，我有两个相同的输入，在 setTimeout 中，我们从第二个标签中删除活动类以复制您看到的问题。

https://codepen.io/doughballs/pen/zYGWRbj

注意，在文档中列出了一个对动态创建的输入执行此操作的函数：

预填充文本输入 如果您在使用标签时遇到问题 重叠的预填充内容，尝试将 class="active" 添加到标签。 您也可以调用函数 M.updateTextFields();重新初始化 如果您动态添加页面上的所有 Materialize 标签 输入。

https://materializecss.com/text-inputs.html