Сброс формы сворачивает ярлыки внутри самой формы - PullRequest
Новая
       9

Сброс формы сворачивает ярлыки внутри самой формы

0 голосов
/ 13 марта 2020

Я занимаюсь разработкой веб-сайта с материализацией CSS. Моя проблема заключается в том, что когда я использую встроенный метод сброса формы, встроенный в кнопку сброса, метки сворачиваются внутри формы. Это происходит только в том случае, если в форме было значение, которое было сброшено. Когда я нажимаю на форму, она возвращается в нормальное состояние. У кого-нибудь есть идеи, почему это происходит и как это решить? Или, может быть, другая форма, которую я могу сбросить форму без этого поведения? Заранее спасибо. Ошибка формы Форма до нажатия кнопки сброса 

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

1 Ответ

0 голосов
/ 13 марта 2020

В Materialise css, когда на входе есть контент или он сфокусирован, метка получает класс 'active'. Это перемещает этикетку вверх, сжимает ее и окрашивает. Когда вы связываетесь с DOM через Javacript, ввод не знает об изменении. Чтобы вручную «сбросить» вход, вам нужно добавить класс «активный» к любому входу, который имеет контент (или заполнитель). 

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

На рисунке ниже у меня есть два идентичных входа, и в setTimeout мы удаляем активный класс из второй метки, чтобы воспроизвести проблему, которую вы видите.

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

Обратите внимание, в документации есть Перечисленная функция, которая делает это для динамически создаваемых входов:

Предварительное заполнение текстовых входов Если у вас возникли проблемы с ярлыками, перекрывающими предварительно заполненное содержимое, попробуйте добавить к метке class = "active". Вы также можете вызвать функцию M.updateTextFields (); переинициализировать все метки материализации на странице, если вы динамически добавляете входные данные.

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

...