jroll-fixedinput 是一个方便用户在移动端输入框输入文本时，自动将键盘上的输入框浮动起来的 npm 包。在移动端，由于键盘的占据空间，往往会导致输入框被键盘遮挡，这就让用户感到十分不便。而 jroll-fixedinput 正好可以解决这个问题。
下面，我们将为大家详细介绍 jroll-fixedinput 的使用方法。
安装
使用 jroll-fixedinput 需要通过 npm 安装。在终端中输入：
npm install jroll-fixedinput --save
这里我们使用了 --save 参数，表示将该依赖包添加到 package.json 中。
使用
安装完成后，在需要使用的页面中引入 jroll-fixedinput：
<script src="node_modules/jroll-fixedinput/dist/jroll-fixedinput.min.js"></script>
在页面加载完成后，执行以下代码：
var fixedinput = new JRoll.FixedInput('input');其中，参数 ‘input’ 表示浮起的输入框需要包含的所有 input 元素的选择器。可以为 id，class 或其他任意选择器。
这样就可以实现输入框随着键盘浮起，避免被键盘遮挡的效果。
此外，jroll-fixedinput 还提供了一些可选的配置项，可在初始化时传入，比如：
var fixedinput = new JRoll.FixedInput('input', {
offset: 10,
zIndex: 100
});- offset：键盘与输入框底部的距离，默认为 0；
- zIndex：浮起的输入框的 z-index 值，默认为 10。
示例代码
下面是一个简单的例子：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------- ------------
------- --------------------------------------------------------------------------
-------
------
------
------ ----------- --------------- ---------------------
------ --------------- --------------- --------------------
------ ------------- -----------
-------
--------
--- ---------- - --- ------------------------- -
------- ---
------- ---
---
---------
-------
-------总结
jroll-fixedinput 是一个十分实用的 npm 包，能够在移动端为用户提供更好的输入体验。虽然使用简单，但是在实际的开发中还需加强对 jroll-fixedinput 原理的理解，并充分考虑各种情况下的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557e081e8991b448d4ef2