Material Design 风格的输入框实现教程-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是一种由 Google 推出的设计语言，其设计风格简洁、明亮，深受广大用户喜爱。在前端开发中，我们可以使用 Material Design 风格的输入框来增强用户交互体验。本文将介绍如何使用 HTML、CSS 和 JavaScript 实现 Material Design 风格的输入框。

1. HTML 结构

首先，我们需要创建一个 HTML 结构来包含输入框和标签。如下所示：

<div class="input-field">
  <input id="input" type="text" />
  <label for="input">Input Label</label>
</div>

其中，.input-field 类表示输入框的容器，#input 表示输入框本身，label 标签则是输入框的标签。注意，label 标签的 for 属性需要与输入框的 id 属性相同，这样才能实现点击标签时输入框获得焦点的效果。

2. CSS 样式

接下来，我们需要为输入框添加样式。我们可以使用 CSS 的伪类和伪元素来实现 Material Design 风格的效果。如下所示：

// javascriptcn.com 代码示例
.input-field {
  position: relative;
  margin-bottom: 1.5rem;
}

.input-field label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1rem;
  color: #9e9e9e;
  transition: all 0.2s ease-out;
  pointer-events: none;
}

.input-field input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  outline: none;
  font-size: 1rem;
  padding: 0.5rem 0;
}

.input-field input:focus {
  border-bottom: 2px solid #2196f3;
}

.input-field input:focus ~ label {
  top: -1.5rem;
  font-size: 0.8rem;
  color: #2196f3;
}

其中，.input-field 类的 position 属性设置为 relative，以便后续设置 label 和 input 的位置。margin-bottom 属性用于设置输入框容器的下外边距。

.input-field label 类的 position 属性设置为 absolute，以便将标签覆盖在输入框上方。top 和 left 属性设置为 0，使标签与输入框左上角对齐。font-size 属性设置为 1rem，color 属性设置为灰色，transition 属性用于实现动画效果，pointer-events 属性设置为 none，以便标签不会干扰输入框的交互。

.input-field input 类用于设置输入框的样式。width 属性设置为 100%，以便输入框的宽度与容器一致。border 属性设置为 none，以便去除默认的边框样式。border-bottom 属性设置为灰色的实线，用于表示输入框的底部边框。outline 属性设置为 none，以便去除默认的轮廓样式。font-size 属性设置为 1rem，padding 属性用于设置输入框的内边距。

.input-field input:focus 类用于设置输入框获得焦点时的样式。border-bottom 属性设置为蓝色的实线，表示输入框的底部边框变粗。注意，这里的 :focus 伪类需要与 HTML 中的 input 元素相对应。

.input-field input:focus ~ label 类用于设置输入框获得焦点时标签的样式。top 属性设置为 -1.5rem，表示标签向上移动 1.5 个字号的距离。font-size 属性设置为 0.8rem，color 属性设置为蓝色，以便与输入框获得焦点时的样式相一致。注意，这里的 ~ 选择器用于表示 input 元素之后的 label 元素。

3. JavaScript 交互

最后，我们需要为输入框添加交互效果。我们可以使用 JavaScript 来实现标签点击时输入框获得焦点的效果。如下所示：

const input = document.querySelector('#input');
const label = document.querySelector('label[for="input"]');

label.addEventListener('click', () => {
  input.focus();
});

其中，querySelector 方法用于获取 input 和 label 元素。addEventListener 方法用于为标签添加点击事件，当标签被点击时，调用 focus 方法使输入框获得焦点。

4. 示例代码

完整的示例代码如下所示：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Material Design Input Field</title>
    <style>
      .input-field {
        position: relative;
        margin-bottom: 1.5rem;
      }

      .input-field label {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 1rem;
        color: #9e9e9e;
        transition: all 0.2s ease-out;
        pointer-events: none;
      }

      .input-field input {
        width: 100%;
        border: none;
        border-bottom: 1px solid #9e9e9e;
        outline: none;
        font-size: 1rem;
        padding: 0.5rem 0;
      }

      .input-field input:focus {
        border-bottom: 2px solid #2196f3;
      }

      .input-field input:focus ~ label {
        top: -1.5rem;
        font-size: 0.8rem;
        color: #2196f3;
      }
    </style>
  </head>
  <body>
    <div class="input-field">
      <input id="input" type="text" />
      <label for="input">Input Label</label>
    </div>
    <script>
      const input = document.querySelector('#input');
      const label = document.querySelector('label[for="input"]');

      label.addEventListener('click', () => {
        input.focus();
      });
    </script>
  </body>
</html>

5. 总结

通过本文的介绍，我们了解了如何使用 HTML、CSS 和 JavaScript 实现 Material Design 风格的输入框。在实现过程中，我们使用了 CSS 的伪类和伪元素来实现动画效果，使用 JavaScript 来实现标签点击时输入框获得焦点的效果。这些技术不仅可以应用于输入框，还可以应用于其他组件的实现中。希望本文对你有所帮助！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656b0066d2f5e1655d3783f3