Question

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

Answer 1

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

以下方法对我有用：

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

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

Answer 2

通过将ABRecordCopyCompositeName(record)?.takeRetainedValue() as NSString? as? NSString类添加到标签的元素来触发标签转换行为。因此，如果您将javascript添加到标签（例如active）除了填写字段之外，标签将转换出字段，就像用户操作选择时一样。

Answer 3

document.ready事件仅在Turbolink正常工作时触发一次，因此您需要使用Turbolinks加载事件。

如此发生得很快，如果您想观看动画，则将其包装在一个很小的超时时间内。

具有超时/可见动画

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

没有超时/可见动画

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

使用Turbolink启用5，并实现CSS 1.0.0

Answer 4

With JQuery you can use $('#yourInputText').change();

Answer 5

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

Answer 6

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

Materialize.updateTextFields();

代替：

M.updateTextFields();

Answer 7

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

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

Answer 8

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

在组件状态下将输入的value属性链接到某个值。（例如：value = {this.state.name} ）
将行document.M.updateTextFields()添加到组件的componentDidMount() lifeCycle方法中。

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

当通过javascript填充输入框时，使实体标签移出输入框

8 个答案: