Normally, with Materialize, the labels for text input boxes show up inside the input boxes until a user enter selects the box and enters text in it. However, when a box's value is filled via javascript, the label does not move out of the way. It stays in the box and overlaps with the text entered. Is there a way to trigger the label transition with javascript as well, so this doesn't happen?
通常,使用Materialize,文本输入框的标签会显示在输入框内,直到用户输入选择框并在其中输入文本。但是,当通过javascript填充框的值时,标签不会移开。它保留在框中并与输入的文本重叠。有没有办法用javascript触发标签转换,所以这不会发生?
3 个解决方案
#1
15
More specifically, if you are using Materialize in Rails with turbolinks enabled, you will find that Materialize form fields which are prefilled with non-empty values are not active on page load.
更具体地说,如果您在启用了turbolink的Rails中使用Materialise,您会发现预填充非空值的Materialise表单字段在页面加载时不活动。
The following method worked for me:
以下方法对我有用:
$(function() {
Materialize.updateTextFields();
});
It will add class 'active' to both corresponding labels and prefix icons.
它会将类“active”添加到相应的标签和前缀图标。
#2
12
The label transition behavior is triggered by adding the active class to the label's element. Thus, if you make your javascript add that class to the label (e.g. $('label').addClass('active')) in addition to filling in the field, the label will transition out of the field just as it would when selected by a user action.
通过将活动类添加到标签的元素来触发标签转换行为。因此,如果你让你的javascript将该类添加到标签(例如$('label')。addClass('active'))除了填写字段之外,标签将转换出字段,就像它时一样由用户操作选择。
#3
0
With JQuery you can use $('#yourInputText').change();
使用JQuery,您可以使用$('#yourInputText')。change();
#1
15
More specifically, if you are using Materialize in Rails with turbolinks enabled, you will find that Materialize form fields which are prefilled with non-empty values are not active on page load.
更具体地说,如果您在启用了turbolink的Rails中使用Materialise,您会发现预填充非空值的Materialise表单字段在页面加载时不活动。
The following method worked for me:
以下方法对我有用:
$(function() {
Materialize.updateTextFields();
});
It will add class 'active' to both corresponding labels and prefix icons.
它会将类“active”添加到相应的标签和前缀图标。
#2
12
The label transition behavior is triggered by adding the active class to the label's element. Thus, if you make your javascript add that class to the label (e.g. $('label').addClass('active')) in addition to filling in the field, the label will transition out of the field just as it would when selected by a user action.
通过将活动类添加到标签的元素来触发标签转换行为。因此,如果你让你的javascript将该类添加到标签(例如$('label')。addClass('active'))除了填写字段之外,标签将转换出字段,就像它时一样由用户操作选择。
#3
0
With JQuery you can use $('#yourInputText').change();
使用JQuery,您可以使用$('#yourInputText')。change();