在前端开发中，表单是不可避免的一个部分。而输入标签（input element）也是表单中最常用的元素之一。infieldLabel 是一个方便的 npm 包，它可以使输入标签的 label 在输入时悬浮在输入框上方，为用户提供更好的交互体验。
安装
你可以通过 npm 来安装 infieldLabel：
npm install infieldlabel --save
使用方法
引入 infieldLabel
在你的 HTML 文件中引入 infieldLabel 的 CSS 和 JavaScript 文件：
-- -------------------- ---- -------
--------- -----
------
------
----- ------------------------------- ---------------- --------------- --
-------
------
------ ----------- ------------ --
------- ---------------------------------------
-------
-------或者，你也可以使用模块化的方式来引入：
import 'infieldlabel'
初始化 infieldLabel
在页面加载完成后，使用以下代码来初始化 infieldLabel：
document.addEventListener('DOMContentLoaded', () => {
const inputEl = document.querySelector('#myInput')
inputEl.infieldLabel()
})默认情况下，infieldLabel 会将输入框的 placeholder 属性作为 label 显示在输入框上方。你也可以使用以下代码来自定义 label：
inputEl.infieldLabel({ labelText: 'Custom Label' })配置选项
infieldLabel 提供了一些配置选项，可以通过传入一个对象参数来自定义：
inputEl.infieldLabel({
labelText: 'Custom Label',
labelClass: 'custom-label-class',
labelActiveClass: 'custom-label-active-class',
inputClass: 'custom-input-class',
inputFocusedClass: 'custom-input-focused-class'
})其中，各个选项的含义如下：
labelText：自定义显示在输入框上方的 label 文本。labelClass：自定义 label 元素的 class 名称。labelActiveClass：输入框获得焦点后，label 元素的 class 名称。inputClass：自定义输入框元素的 class 名称。inputFocusedClass：输入框获得焦点后，输入框元素的 class 名称。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------------- ------------
----- ------------------------------- ---------------- --------------- --
-------
-- --- ----- --- --
------------------- -
---------- -----
------ -----
----------------- --- -----
----------- --- ---- ---------
--------------- -----
--------- ---------
----- -----
---- -----
-
-- -------- ----- --- --
-------------------------- -
---------- -----
------ -----
---------- -------------- ------ ---
-
-- --------- --
------------------- -
---------- -----
-------- ---- -----
------- -----
-------------- --- ----- -----
-------- -----
------ ------
-
-- ----------- --
--------------------------- -
------------- -----
-
--------
-------
------
------ ------------------------------
------ ----------- ------------ -------------------- --
------- ---------------------------------------
--------
--------------------------------------------- -- -- -
----- ------- - ----------------------------------
----------------------
---------- ------- -------
----------- ---------------------
----------------- ----------------------------
----------- -------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------