介绍
输入框的浮动标签（floating label）是 Web 应用界面设计中的一种常见元素。它通过在输入框上显示一个浮动的标签来提示用户输入内容的类型，使得用户能够更轻松地填写表单内容。本文介绍了一个 npm 包 @shortcm/floating-label，它提供了一种快速简单的方式来为输入框添加浮动标签。
安装
@shortcm/floating-label 是一个 npm 包，可以通过 npm 或 yarn 安装：
npm install @shortcm/floating-label --save
yarn add @shortcm/floating-label
使用
在你的 JavaScript 代码中导入 @shortcm/floating-label，然后调用它的 floatingLabel() 方法来为输入框添加浮动标签：
import { floatingLabel } from '@shortcm/floating-label';
floatingLabel({
selector: '.my-input',
label: 'Email',
required: true
});这段代码将为所有 CSS 类名为 my-input 的输入框添加一个浮动标签，并且标签的文本内容为 Email，输入框为必填项，如果用户没填写任何内容，浮动标签会变得特别明显。
配置选项
@shortcm/floating-label 支持以下配置选项：
| 名称 | 类型 | 描述 |
|---|---|---|
selector |
string |
必需。输入框的 CSS 选择器 |
label |
string |
必需。浮动标签的文本内容 |
required |
boolean |
可选。输入框是否为必填项，默认为 false。如果该项为 true，当用户尝试提交表单且输入框为空时，浮动标签会变得特别明显。 |
color |
string |
可选。浮动标签的颜色，默认为黑色 |
示例
以下是一个示例，它创建了一个带有浮动标签的输入框。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ----------------------- ---------
-------
---- -
------------ ------ -----------
------- --
-------- --
-
---- -
------- -----
-
----- -
------- --- ----- -----
-------------- ----
-------- -----
---------- -----
------ -----
-
----- -
--------- ---------
--------------- -----
---- ----
---------- -----------------
----------- --- ---- ---------
------ -----
-
--------- -
---------- ----------------- -----------
-
--------- -
------ ----
-
--------
-------
------
------
-----
------ ----------- ---------------------- ---------------
------ ------------ ---------- ------------ -----------------
------
-------
------- --------------------------------------------------------------------
--------
----- ------------- - ------------
----- ---------- - ------ ---------
---------------
--------- --------------
------ -----------
--------- -----
------ ---------
---
----- ---------- - --------------------------------------
----------------------------------- ----
----- ----------------- - ------------------------------------------------------------------------
--------------------------------------------
---------
-------
-------上面的代码会创建一个带有浮动标签的输入框，并且在用户没填写任何内容并尝试提交表单时，浮动标签会变得特别明显（颜色为蓝色，标签文本为红色）。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a130d092702382238d