Сделать материализацию меток перемещаться из поля ввода, когда поле ввода заполняется с помощью javascript

Обычно с Materialize ярлыки для полей ввода текста отображаются внутри полей ввода до тех пор, пока пользователь не вводит этот флажок и не вводит текст в нем. Однако, когда значение поля заполняется с помощью javascript, метка не уходит с пути. Он остается в поле и перекрывается с введенным текстом. Есть ли способ инициировать переход метки с помощью javascript, так что этого не происходит?

Ответ 1

Более конкретно, если вы используете Materialize в Rails с включенными турболинками, вы обнаружите, что поля формы Materialize, которые предварительно заполнены непустыми значениями, не активны при загрузке страницы.

У меня работал следующий метод:

$(function() {
    M.updateTextFields();
});

Это добавит класс 'active' к соответствующим меткам и значкам префиксов.

Ответ 2

Поведение перехода на ярлык запускается путем добавления класса active к элементу метки. Таким образом, если вы сделаете свой javascript, добавьте этот класс к метке (например, $('label').addClass('active')) в дополнение к заполнению поля, метка будет переходить из поля так же, как и при выборе пользователем.

Ответ 3

Событие document.ready срабатывает только один раз, когда работает turbolinks, поэтому вместо этого вам нужно подключиться к событию загрузки turbolinks.

Это происходит так быстро, что, если вы хотите увидеть анимацию, заверните ее в крошечный тайм-аут.

С тайм-аутом/видимой анимацией

document.addEventListener('turbolinks:load', () => {
    setTimeout(() => {
        M.updateTextFields();
    }, 100);
});

Без тайм-аута/видимой анимации

document.addEventListener('turbolinks:load', () => {
    M.updateTextFields();
});

Rails 5 с Turbolinks и Materialise CSS 1.0.0

Ответ 4

Добавьте class="active" в тег label связанный с полем ввода.

Ответ 5

С помощью JQuery вы можете использовать $ ( '# YourInputText') изменить();.

Ответ 6

Если вы используете более старую версию (0.x) Materializecss, используйте:

Materialize.updateTextFields();

вместо:

M.updateTextFields();

Ответ 7

Если вы используете ярлыки, вы будете использовать:

$("label[for='idTag']").addClass('active');