Html 输入文本字段，不'；t动画（材料设计）

我有一个MDC设置，但我的文本字段没有动画

这个链接显示了它应该处于的状态，以及我的字段处于的状态

第一张图片来自我的网站，在那里你可以看到标签在进入活动状态时并没有像底部图片那样动画到顶行。底部图像直接来自Google Material Design演示页面

你的名字

这是一种可能的解决方案：

你摆脱了

将

占位符=“您的姓名”

属性添加到

标记中

使用css隐藏焦点上的占位符

HTML:

片段：

.mdc-text-field\u输入：焦点：：占位符{
可见性：隐藏；
}

---

使用下面的代码片段。还可以使用

mdc.autoInit（）


mdc.autoInit（）；


删除
标准
我以前也遇到过这个问题，您只需在Javascript文件中添加以下行：

mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));

此Javascript代码将CSS动画标签效果与div.mdc文本字段相关联，其顺序如下：

<div class="mdc-text-field">
  <input type="text" id="my-text-field" class="mdc-text-field__input">
  <label class="mdc-floating-label" for="my-text-field">Label</label>
  <div class="mdc-line-ripple"></div>
</div>

因此，每个div都有一个数组，带有class=“mdc text field”。使用document.querySelector您将获得第一个找到的对象。
这一个对我很有用

import {MDCTextField} from '@material/textfield';

const mdcTexts = [].map.call(document.querySelectorAll('.mdc-text-field'), function(el) {
    return new MDCTextField(el);
});

如果你看到任何js错误，你能看看你的浏览器控制台吗。即使样式完全加载。如何使用mdc.autoInit（）；不需要额外的设置或代码，将其放在JS代码中的任何位置或加载DOM后。添加数据mdc auto init=“MDCTextField”

检查我的代码也很重要。我还为图标添加了

materialicons

css库。

<div class="mdc-text-field">
  <input type="text" id="my-text-field" class="mdc-text-field__input">
  <label class="mdc-floating-label" for="my-text-field">Label</label>
  <div class="mdc-line-ripple"></div>
</div>

const edtTexts = [].map.call(document.querySelectorAll('.mdc-text-field'), function(el) {
  return new mdc.textField.MDCTextField(el);
});

import {MDCTextField} from '@material/textfield';

const mdcTexts = [].map.call(document.querySelectorAll('.mdc-text-field'), function(el) {
    return new MDCTextField(el);
});