通过javascript填充输入框时使物化标签移出输入框

Question

通常，对于 Materialize，文本输入框的标签会显示在输入框内，直到用户输入选择框并在其中输入文本。但是，当通过 javascript 填充框的值时，标签不会移开。它保留在框中并与输入的文本重叠。有没有办法也用 javascript 触发标签转换，所以这不会发生？

Answer 1

标签转换行为是通过将 active class 添加到标签的元素来触发的。因此，如果除了填写字段之外，还让 javascript 添加 class 到标签（例如 $('label').addClass('active')），则标签将过渡到字段之外，就像在由用户操作选择。

Answer 2

JQuery 你可以使用 $('#yourInputText').change();

Answer 3

更具体地说，如果您在 Rails 中使用启用了 turbolinks 的 Materialise，您会发现预填充非空值的 Materialise 表单字段在页面加载时不活动。

以下方法对我有用：

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

它将添加 class 'active' 到相应的标签和前缀图标。

Answer 4

document.ready 事件仅在 turbolinks 工作时触发一次，因此您需要利用 turbolinks 加载事件。

它如此发生得如此之快，如果您想观看动画，请将其包装在一个微小的超时中。

有timeout/visible动画

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

无timeout/visible动画

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

Rails 5 与 Turbolinks 和 Materialise CSS 1.0.0

Answer 5

将 class="active" 添加到与输入字段关联的 label 标签中。

Answer 6

如果您使用的是旧版本 (0.x) 的 Materializecss，请使用：

Materialize.updateTextFields();

而不是：

M.updateTextFields();

Answer 7

如果您使用标签，您将使用：

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

Answer 8

对于任何在 ReactJS 中寻找解决方案的人：

当需要将某些值预先填充到表单中时，上述解决方案会有所帮助。（例如：更新详细信息表格）

Make materialize labels move out of input box when input box is filled via javascript