文章/答案/技术大牛

发布

社区首页 >问答首页 >输入文本字段，不显示动画(材质设计)

问输入文本字段，不显示动画(材质设计)
EN

Stack Overflow用户

提问于 2018-10-19 15:15:30

回答 4查看 1.6K关注 0票数 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>

我做错了什么？

我要提前说声谢谢。

html

css

material-design

回答 4

Stack Overflow用户

发布于 2019-04-10 08:27:33

我以前也遇到过这个问题，你只需要在你的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，您将获得第一个找到的对象。

票数 2

Stack Overflow用户

发布于 2018-10-19 16:32:36

使用下面的代码片段。还可以使用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>

票数 1

Stack Overflow用户

发布于 2018-10-19 15:43:21

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

删除<label></label>.

You将placeholder="Your Name"属性添加到<input>标记

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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52887442

复制

相似问题

问输入文本字段，不显示动画(材质设计)
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问输入文本字段，不显示动画(材质设计)EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问输入文本字段，不显示动画(材质设计)
EN