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

Question

我一直在设计一个网站与物化CSS。我的问题是，当我使用嵌入在reset按钮中的内置form reset方法时，标签会在表单中折叠。只有在重置的表单中存在值时，才会发生这种情况。当我单击窗体时，它将返回到其正常状态。有谁知道为什么会发生这种情况，以及如何解决它？或者是另一个表单，我可以重置表单，而不需要上述行为？提前谢谢。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中，当输入有内容或被聚焦时，标签会添加一个“active”类。这将使标签上移、缩小和着色。当你通过javacript处理dom时，输入并不知道这个变化。要手动“重置”输入，您需要向任何包含内容(或占位符)的输入添加一个“active”类。

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

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

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

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

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

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