Material Design 是由 Google 在 2014 年推出的全新设计风格，旨在为设计师、开发者提供一套新的视觉语言。其中的文本框是 Material Design 中的一个重要组成部分。
在本文中，我们将探讨 Material Design 文本框的实现方法，并提供详细的代码示例，希望能为前端开发者提供一些指导意义。
1. 文本框的基本样式
Material Design 文本框的样式通常由以下几个部分组成：
- 文字标签（Label）：用于标识文本框的用途或提示用户输入内容；
- 输入框（Input）：用户输入文本的区域；
- 下划线（Underline）：用于突出文本框的区域和边框，和标记输入框是否处于激活状态；
- 悬浮标签（Floating Label）：在用户输入时向上移动的标签，可起到提示用户目的的作用；
- 校验信息（Validation Message）：用于提示用户输入内容是否符合规范或错误信息。
下面我们来看一下如何使用 CSS 和 HTML 实现这些基本样式。
HTML 代码：
<div class="form-field"> <label for="name-input">姓名</label> <input id="name-input" type="text" /> <div class="underline"></div> <span class="floating-label">姓名</span> <span class="validation-message">请输入您的姓名</span> </div>
CSS 代码：
-- -------------------- ---- ------- ----------- - --------- --------- - ----- - --------- --------- ---- -- ----- -- ---------- ----- ------------ ----- ------ -------- ----------------- ---- ---- -------------------- ---------- ---------- ------ -------------------- ----- --------------------------- --------- - ----- - ------------ ----- --------------- ---- ------------- -- ------- ----- -------------- -- -------------- --- ----- -------- ----------------- ------------ -------- ----- ------ ----- ---------- ----- ------------ ----- ------ ----- - ----------- - -------------------- -------- - ----------- - ---------- - ------ ----- - ---------- - --------- --------- ------- -- ----- -- ------- ---- ------ -- ----------------- -------- -------------------- ------ -------------------- ----- --------------------------- --------- - --------------- - --------- --------- ---- ----- ----- -- ---------- ----- ------------ ----- ------ -------- -------------------- ---------- ---------- ------ -------------------- ----- --------------------------- --------- - ----------- - ---------- - --------------- - ---------- ------------------ ---------- ----- ------ -------- - ------------------- - --------- --------- ------- ------ ----- -- ---------- ----- ------------ ----- ------ -------- ----------- ------- - ------------- - ------------------- - ----------- -------- -展开代码
2. 文本框的交互效果
实现了基本样式之后，我们还需要为文本框添加交互效果，以提高用户体验。常见的交互效果包括：
- 文本框获得焦点时，标签和下划线变为蓝色；
- 文本框失去焦点后，如果有输入内容，则保持标签和下划线蓝色，否则恢复为灰色；
- 文本框写入和删除文本时，悬浮标签根据输入内容的情况，向上或向下滑动。
下面我们来看一下如何使用 JavaScript 实现这些交互效果。
-- -------------------- ---- ------- ----- ------ - -------------------------------------- -------- -------------------- -- - ------------------------------- - -- - ----- ----- - -------------------------------- ----- --------- - ------------------------- --------------------- - ------------------ ------------- ----------------- - ---------- --------------------- - ------- --- ------------------------------ - -- - ----- ----- - -------------------------------- ----- --------- - ------------------------- -- -------------- - --------------------- - --- ----------------- - ---------- --------------------- - --- - --- ------------------------------- - -- - ----- ----- - -------------------------------- ----- ------------- - ------------------------- ----------------------------- - ----------- - ------------------ ------------ - --- ---------------------------- - ----------- - ------ - --- ------------------------- - ----------- - --------- - ---------- --- ---展开代码
3. 实现示例
以下是一个完整的 Material Design 文本框示例，包括基本样式和交互效果：
<div class="form-field"> <label for="name-input">姓名</label> <input id="name-input" type="text" required /> <div class="underline"></div> <span class="floating-label">姓名</span> <span class="validation-message">请输入您的姓名</span> </div>
-- -------------------- ---- ------- ----------- - --------- --------- -------------- ----- - ----- - --------- --------- ---- -- ----- -- ---------- ----- ------------ ----- ------ -------- ----------------- ---- ---- -------------------- ---------- ---------- ------ -------------------- ----- --------------------------- --------- - ----- - ------------ ----- --------------- ---- ------------- -- ------- ----- -------------- -- -------------- --- ----- -------- ----------------- ------------ -------- ----- ------ ----- ---------- ----- ------------ ----- ------ ----- - ----------- - -------------------- -------- - ----------- - ---------- - ------ ----- - ---------- - --------- --------- ------- -- ----- -- ------- ---- ------ -- ----------------- -------- -------------------- ------ -------------------- ----- --------------------------- --------- - --------------- - --------- --------- ---- ----- ----- -- ---------- ----- ------------ ----- ------ -------- -------------------- ---------- ---------- ------ -------------------- ----- --------------------------- --------- - ----------- - ---------- - --------------- - ---------- ----------------- ------------ ---------- ----- ------ -------- - ------------------- - --------- --------- ------- ------ ----- -- ---------- ----- ------------ ----- ------ -------- ----------- ------- - ------------- - ------------------- - ----------- -------- -展开代码
-- -------------------- ---- ------- ----- ------ - -------------------------------------- -------- -------------------- -- - ------------------------------- - -- - ----- ----- - -------------------------------- ----- --------- - ------------------------- --------------------- - ------------------ ------------- ----------------- - ---------- --------------------- - ------- --- ------------------------------ - -- - ----- ----- - -------------------------------- ----- --------- - ------------------------- -- -------------- - --------------------- - --- ----------------- - ---------- --------------------- - --- - --- ------------------------------- - -- - ----- ----- - -------------------------------- ----- ------------- - ------------------------- ----------------------------- - ----------- - ------------------ ------------ - --- ---------------------------- - ----------- - ------ - --- ------------------------- - ----------- - --------- - ---------- --- ---展开代码
4. 结语
本文介绍了 Material Design 文本框的实现方法，包括基本样式和交互效果。希望通过本文的介绍，能够为前端开发者提供一些指导和参考。除此之外，还需要注意到 Material Design 中还有很多其他的组件和设计元素，如按钮、卡片等等，可以通过官方文档进行深入了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6794b396504e4ea9bd953fb3
