提问人：neurodynamic 提问时间：8/20/2015 更新时间：11/5/2019 访问量：21972
当通过 javascript 填充输入框时，使具体化标签移出输入框
Make materialize labels move out of input box when input box is filled via javascript
问：
通常，使用 Materialize 时，文本输入框的标签会显示在输入框内，直到用户输入选择该框并在其中输入文本。但是，当通过 javascript 填充框的值时，标签不会移开。它保留在框中并与输入的文本重叠。有没有办法用 javascript 触发标签转换，这样就不会发生这种情况？
答：
16赞
neurodynamic
8/20/2015
#1
标签转换行为是通过将类添加到标签的元素来触发的。因此，如果您让 javascript 除了填写字段之外将该类添加到标签中（例如），标签将过渡到字段之外，就像用户操作选择时一样。active$('label').addClass('active')
0赞
ferchoman09
2/13/2016
#2
使用 JQuery，您可以使用 $（'#yourInputText'）.change（）;
评论
1赞
elquimista
11/21/2016
为了初学者，你必须更明确地说明你的答案。
0赞
ferchoman09
12/6/2016
你只需要一行。$（'input'）.change（） 或 Materialize.updateTextFields（）。就这样。
32赞
elquimista
2/25/2016
#3
更具体地说，如果您在启用了 turbolinks 的 Rails 中使用 Materialize，您会发现预填充了非空值的 Materialize 表单字段在页面加载时处于活动状态。
以下方法对我有用：
$(function() {
M.updateTextFields();
});
它将为相应的标签和前缀图标添加类。'active'
评论
3赞
gegobyte
12/2/2018
Materialize 不再有效，您可以将其替换为M.updateTextFields();
0赞
Pascal Ganaye
10/6/2020
如果你不使用 jquery： document.addEventListener（“DOMContentLoaded”， function （） { // @ts-ignore M.updateTextFields（）;
2赞
Steve Meisner
11/27/2018
#4
当 turbolinks 工作时，该事件只会触发一次，因此您需要点击 turbolinks 加载事件。document.ready
它发生得如此之快，以至于如果您想查看动画，请将其包装在一个很小的超时中。
带超时/可见动画
document.addEventListener('turbolinks:load', () => {
setTimeout(() => {
M.updateTextFields();
}, 100);
});
无超时/可见动画
document.addEventListener('turbolinks:load', () => {
M.updateTextFields();
});
使用 Turbolinks 的 Rails 5 和 Materialize CSS 1.0.0
1赞
Darryl Mendonez
6/1/2019
#5
添加到与输入字段关联的标记中。class="active"label
0赞
restlessera
7/23/2019
#6
如果您使用的是旧版本 （0.x） 的 Materializecss，请使用：
Materialize.updateTextFields();
而不是：
M.updateTextFields();
3赞
Eduardo Tolentino
8/21/2019
#7
如果使用标签，则将使用：
$("label[for='idTag']").addClass('active');
0赞
thewebjackal
11/5/2019
#8
对于任何在 ReactJS 中寻找解决方案的人：
- 将输入的 value 属性链接到组件状态中的某个值。（例如：value={this.state.name})
- 将该行添加到组件的 lifeCycle 方法中。
document.M.updateTextFields()componentDidMount()
当需要将某些值预填充到表单中时，上述解决方案会有所帮助。（例如：更新详细信息表单）
评论