logo标签列表

输入文本框没有动画效果（Material Design）

htmlcssmaterial-design
3
我有一个MDC的设置，但我的文本字段没有动画效果。 https://imgur.com/a/1h27vhD 这个链接展示了它应该达到的状态和我的字段所处的状态。
第一张图片是来自我的网站，你可以看到标签在进入活动状态时没有动画效果，而底部图片则是直接从Google Material Design演示页面获取的。 

<link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

<div class="mdc-text-field mdc-text-field--outlined">
  <input type="text" id="tf-outlined" class="mdc-text-field__input">
  <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
  <div class="mdc-notched-outline">
    <svg>
                                  <path class="mdc-notched-outline__path"/>
                                </svg>
  </div>
  <div class="mdc-notched-outline__idle"></div>
</div>

我做错了什么？

提前谢谢。

请您在浏览器控制台查看是否有任何JS错误？ - Baptiste
有问题，它会给出以下信息。即使样式已经完美加载。 https://imgur.com/a/L2cO3tl - Magnus Pilegaard
4个回答
2

我之前也遇到过这个问题，你只需要在你的Javascript文件中添加以下行：

最初的回答 
mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));

这段Javascript代码将CSS动画标签效果与您的div .mdc-text-field相关联，按照您的顺序执行：

最初的回答：

<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>

这就是为什么你在组件中无法看到正确的标签动画。我认为MDC文档很好，但是不够详细。

如果问题仍然存在，请告诉我，我会尽快检查你的问题，问候！

编辑：我忘了说；要获取网站中的所有文本字段，你必须使用：

<最初的回答未提供，因为没有上下文或者信息参考。> 
const edtTexts = [].map.call(document.querySelectorAll('.mdc-text-field'), function(el) {
  return new mdc.textField.MDCTextField(el);
});

你会得到一个包含每个 class="mdc-text-field" 的 div 的数组。使用 document.querySelector 可以获取第一个找到的对象。最初的回答。
1
使用下面的代码片段。还要使用 mdc.autoInit();。 

mdc.autoInit();
        
   <link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
          
          
<body>   
     
     <div class="mdc-text-field mdc-text-field--outlined  mdc-text-field--with-trailing-icon" data-mdc-auto-init="MDCTextField">
      <i class="material-icons mdc-text-field__icon">delete</i>
      <input type="text" id="my-input" class="mdc-text-field__input">
      <label for="my-input" class="mdc-floating-label">Standard</label>
      <div class="mdc-notched-outline">
        <svg>
          <path class="mdc-notched-outline__path"/>
        </svg>
      </div>
      <div class="mdc-notched-outline__idle"></div>
    </div>


   <script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>
           
</body>

如何使用 mdc.autoInit(); - Magnus Pilegaard
请将以下与编程有关的内容从英语翻译成中文。只返回已翻译的文本：无需额外设置或代码，放置在JS代码或DOM加载后即可。同时，重要的是要添加 data-mdc-auto-init="MDCTextField" 检查我的代码。我还添加了 Material Icons CSS 库以获取图标。 - Shiv Kumar Baghel
0
这是一个可能的解决方案：

  1. 去掉 <label></label>。

  2. 在你的 <input> 标签中添加 placeholder="Your Name" 属性

  3. 使用 CSS 在焦点上隐藏占位符

HTML:

<input type="text" id="tf-outlined" class="mdc-text-field__input" placeholder="Your Name">

CSS：

.mdc-text-field__input:focus::placeholder {
  visibility: hidden;
}

代码片段：

.mdc-text-field__input:focus::placeholder {
  visibility: hidden;
}
<link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

<div class="mdc-text-field mdc-text-field--outlined">
  <input type="text" id="tf-outlined" class="mdc-text-field__input" placeholder="Your Name">
  <div class="mdc-notched-outline">
    <svg>
                                  <path class="mdc-notched-outline__path"/>
                                </svg>
  </div>
  <div class="mdc-notched-outline__idle"></div>
</div>

0

这个对我有效。

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

const mdcTexts = [].map.call(document.querySelectorAll('.mdc-text-field'), function(el) {
    return new MDCTextField(el);
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接