zsh-pinkeypad 是一个方便使用的类库，可以帮助前端 web 开发者快速实现手机端键盘样式，而无需花费太多的时间和功夫。这个开源的 npm 包可以帮助你实现从输入数字到删除数字等各种操作，并且可以轻松地自定义外观和样式，为你在移动端开发中节约更多时间和精力。
安装
使用 npm 安装 zsh-pinkeypad：
npm install zsh-pinkeypad
使用
在你的项目中使用 zsh-pinkeypad，创建一个包含一个输入框的页面：
<div class="pinkeypad-container"> <input type="text" id="pinkeypad-input" readonly> </div>
import PinKeypad from 'zsh-pinkeypad';
const container = document.querySelector('.pinkeypad-container');
const keypad = new PinKeypad(container, {
input: document.querySelector('#pinkeypad-input'),
onDelete: () => console.log('delete')
});在此示例中，我们传入了一个 DOM 元素作为父容器，并将其 id 作为参数传递给 PinKeypad 对象。在它的 options 属性中，我们定义了该对像要操作的输入框及删除的回调函数。
现在，我们已经可以在手机上看到一个“<--”按钮和 12 个带有数字的按钮，且可以在按钮上点击并将数字添加到输入框中。
API
zsh-pinkeypad 包含了一些自定义方法和事件，使您可以轻松添加和定制您自己的特定操作和外观：
初始化
使用以下代码创建 PinKeypad 对象：
const keypad = new PinKeypad(container, options);
第一个参数 container 是包含自定义键盘的 DOM 元素。
第二个参数 options 包含自定义功能和样式的对象。它具有以下属性：
input（必填）：要更新持有键盘值的输入元素。onAccept：当完全输入 PIN 后，将调用您的回调函数。onDelete：每次单击“<--”按钮时调用您的回调函数。style：覆盖默认样式，可自定义键盘。设置为null可使用默认样式。
添加自定义操作
使用以下代码将 addEventListener 添加到 PinKeypad 中：
keypad.addEventListener('check-empty', () => {
console.log('check if input is empty!');
if(keypad.inputText === '') console.log('input is empty!');
});以下是可用于添加操作的事件：
- check-empty：检查输入是否为空。
- check-full：检查输入是否已满。
- update：每当文本值更新时。
- clear：重置小键盘和输入字段值。
- accept：调用
options.onAccept更改小键盘状态，以实现完成 PIN 的更改。
自定义样式
使用以下方式覆盖样式：
-- -------------------- ---- -------
----- -------- - -
---------- -
---------------- --------
------- ------
--
-------------- -
---------------- --------
--
----------- -
------ -------
-
-
----- ------ - --- -------------------- - ------ -------- ---具体说明：
buttonPressed：表示按下按钮所采用的样式。keyButton：表示按钮本身所采用的样式。keyText：表示按钮上的文本所采用的样式。
重置输入
使用以下代码重置键盘和输入：
keypad.reset();
这将清除输入并将键盘恢复到原始状态。
销毁
使用以下代码销毁 PinKeypad：
keypad.destroy();
结论
在本文中，我们学习了如何使用 zsh-pinkeypad 快速创建具有移动设备风格的输入设备。由于 zsh-pinkeypad 包括了多种 API 可用于自定义操作和样式，开发者可以快速实现他们所需的功能，并充分利用他们在移动端应用中更好且更符合用户期望的体验。
从这里开始，你可以在自己的项目中应用 zsh-pinkeypad 并且深入了解如何去自定义自己的功能和样式，以创造其他令人羡慕的移动端体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005597181e8991b448d6f69