在 Web 前端开发中，我们经常使用表单控件来收集用户输入的信息。其中，输入框是最为常见的一种表单控件。当用户不填写输入框时，我们通常会为其设置一个占位符（placeholder），以提示用户应该在这里填写什么内容。然而，IE8 及以下版本浏览器并不支持 placeholder 属性，这就需要我们引入一些 polyfill 来实现兼容。
placeholder-shiv 是一个可以解决 IE8 及以下版本浏览器不支持 placeholder 的 npm 包，下面我们将介绍如何使用它。
安装
使用 npm 进行安装：
npm install placeholder-shiv --save
使用
在 HTML 中添加以下代码来引入 placeholder-shiv 的 polyfill：
<!--[if lt IE 9]> <script src="node_modules/placeholder-shiv/dist/placeholder-shiv.min.js"></script> <![endif]-->
上述代码只会在 IE8 及以下版本浏览器中执行，因此不必担心会对性能造成影响。
在 CSS 文件中添加以下样式，以使得 placeholder 正确显示：
-- -------------------- ---- -------
--------------------------- - -- ------ -------- --
------ -----
-
----------------- - -- ------- ------- - -- -- --
------ -----
-------- --
-
------------------ - -- ------- ------- --- --
------ -----
-------- --
-
---------------------- - -- -------- -------- --- --
------ -----
-示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------
------- -- -- ---
------- --------------------------------------------------------------------------
------------
-------
--------------------------- - -- ------ -------- --
------ -----
-
----------------- - -- ------- ------- - -- -- --
------ -----
-------- --
-
------------------ - -- ------- ------- --- --
------ -----
-------- --
-
---------------------- - -- -------- -------- --- --
------ -----
-
--------
-------
------
------
------ ----------------------
------ ----------- ----------- ----------------------
----
------ -----------------------
------ ------------ ------------ ----------------------
----
------ --------------------------
------ --------------- --------------- ----------------------
----
------- -------------------------
-------
-------
-------以上就是 placeholder-shiv 的使用教程。通过引入该 npm 包，我们可以很方便地兼容 IE8 及以下版本浏览器中的 placeholder 属性，并提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/39018