Material Design 中的典型输入框组件示例-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是 Google 推出的一套设计语言，旨在为多种平台提供一致的用户体验，包括了 HTML、CSS、JavaScript 等前端技术。其中，典型输入框组件是 Material Design 中的重要组成部分，本文将介绍其示例和使用方法。

效果示例

以下是典型输入框组件的示例效果图：

可以看到，该组件的特点如下：

输入框上方有一个浮动的标签，用于提示用户应该输入什么内容。
当输入框获得焦点时，标签会缩小并向上移动，同时输入框下方会出现一条动画效果的线条。
在输入框中输入内容时，输入框下方的线条会变成蓝色，并且标签会上移。
如果输入框为空，标签会回到原始位置，并且下方的线条会变成灰色。

总的来说，这个组件具有良好的交互体验，能够比较清晰地告诉用户正在输入什么内容，同时也能够区分输入框是否为空。

实现方法

要实现这个组件，我们可以采用 HTML、CSS 和 JavaScript。以下是示例代码：

// javascriptcn.com 代码示例
<div class="mdc-text-field mdc-text-field--outlined">
  <input type="text" class="mdc-text-field__input">
  <label class="mdc-floating-label">Your Name</label>
  <div class="mdc-notch">
    <svg>
      <path class="mdc-notch-path"/>
    </svg>
  </div>
  <div class="mdc-notched-outline__idle"></div>
</div>

// javascriptcn.com 代码示例
.mdc-text-field {
  width: 300px;
  margin: 20px auto;
}
.mdc-text-field__input {
  font-size: 20px;
  padding-top: 14px;
  padding-bottom: 10px;
}
.mdc-floating-label, .mdc-notched-outline__idle {
  font-size: 16px;
  transform-origin: top left;
}
.mdc-floating-label {
  transition: transform 0.2s ease-out, color 0.2s linear;
  color: #6b6b6b;
}
.mdc-text-field__input:focus + .mdc-floating-label, .mdc-text-field__input:not(:placeholder-shown) + .mdc-floating-label {
  transform: translateY(-150%) scale(0.75);
  color: #2476ff;
}
.mdc-notched-outline__idle {
  transition: transform 0.2s ease-out, border-color 0.2s linear;
  border-radius: 4px;
  border-color: #c8c8c8;
}
.mdc-text-field__input:focus + .mdc-notched-outline__idle, .mdc-text-field__input:not(:placeholder-shown) + .mdc-notched-outline__idle {
  transform: scaleX(1);
  border-color: #2476ff;
}

// javascriptcn.com 代码示例
// 为浮动标签添加“悬停”效果
const floatingLabel = document.querySelector('.mdc-floating-label');
floatingLabel.addEventListener('mouseenter', () => {
  if (!floatingLabel.classList.contains('mdc-floating-label--float-above')) {
    floatingLabel.classList.add('mdc-floating-label--shake');
    setTimeout(() => {
      floatingLabel.classList.remove('mdc-floating-label--shake');
    }, 500);
  }
});

可以看到，要实现这个组件，需要用到 Material Design 提供的一些 CSS 类，例如 mdc-text-field、mdc-floating-label、mdc-notch 等。其中，mdc-text-field--outlined 表示输入框要显示轮廓线，而不是完全平面的样式。

此外，标签在不同状态下的颜色、位置等也需要通过 CSS 进行设置。这里需要注意的是，transform-origin 属性的设置需要准确无误，否则会导致标签位置错位。

以上面的示例代码为基础，我们还可以添加一些其他的效果，例如在用户输入内容时显示密码强度、校验输入内容等。这些功能可以使用 JavaScript 实现。

总结

典型输入框组件是 Material Design 中的重要组成部分。它具有良好的交互体验和视觉效果，能够明确地告诉用户应该输入什么内容，并且能够区分输入框是否为空。要实现这个组件，需要使用 HTML、CSS 和 JavaScript，以及 Material Design 提供的一些 CSS 类。在实际开发中，我们还可以基于此组件添加其他的效果，从而提升用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64fa2890f6b2d6eab314ebef