SDK 集成

• 在需要使用安全键盘的地方引入安全键盘的 js 和 css 文件

SDK 使用

1.引入 SafetyKeyboard

import SafetyKeyboard from '../build/NTESSafetyKeyBoard'
import '../build/NTESSafetyKeyBoard.css'

2.在确定页面载入后，实例化 SafetyKeyBoard 类

window.onload = function() {
  const safeKbd = new SafetyKeyBoard({
    el: '',
    // 其它参数
    ...
  })
}

注意

• SDK 会给 el 设置 readOnly 参数以防止输入框在获取焦点时弹出系统输入法，但是这样会导致输入框没有输入光标
• 建议隐藏 el，并自己重绘输入框和光标。这样做不仅可以完全按照业务和设计来定制输入框，而且可以规避 iOS 系统下，输入框获得焦点时的切换 table 表单项时的弹出条。简单的实现可参考 demo 里面 custom 那个输入框。
• 页面必须设置如下样式 html, body {margin: 0, padding: 0}
• 页面必须设置如下 meta 信息 <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=0"/>

参数、接口和回调

SafetyKeyboard 类构造函数参数列表

参数名	类型	是否必填	默认值	备注
el	string	是	---	必须是可以作为 document.querySelector 的参数，且必须指向 HTMLInputElement，否则会抛出异常
title	string	否	网易易盾安全键盘	键盘标题，最大不超过14个字符
hideText	boolean	否	true	是否隐藏输入内容
shuffle	boolean	否	true	是否乱序显示键盘
layout	string	否	full	number 仅数字键盘；full 全键盘
encrypt	string	否	standard	数据加密方式，sm（国密算法） 或 standard (标准加密算法）
rdata	string	是	---	作为默认加密方式中获取 seed 的参数，具体信息参见其它问题和注意事项
maxTextLength	number	否	Number.MAX_SAFE_INTEGER	最大输入长度，达到此长度将触发 onFinish 回调；再次按键不会增加输入内容，并且会触发 onFinish 回调
onInput	function	否	---	按键回调
onFinish	function	否	---	输入完成的回调
onShow	function	否	---	显示键盘后的回调
onHide	function	否	---	隐藏键盘后的回调
onLayoutChange	function	否	---	键盘布局改变后的回调

回调

• onInput(inputText: string, inputTextLength: number)
• onFinish(inputText: string, inputTextLength: number)
• onShow()
• onHide()
• onLayoutChange(layout: 'number' | 'alphabet' | 'symbol')

参数名	备注
inputText	为输入的内容，根据 encrypt 参数的不同，返回明文或者密文
inputTextLenght	为明文内容的长度
layout	为切换后键盘布局

SDK 接口

• get 方法 kbd.inputText()

  获取输入内容，如果有设置加密，则返回加密内容，否则返回明文

• kbd.show()

  显示键盘

• kbd.hide()

  隐藏键盘

• kbd.getInputLength()

  获取输入内容明文的长度

• kbd.appendText(str: string）

  输入的明文内容末尾增加字符串 str

• kbd.deleteText(length: number = 1)

  从输入的明文内容末尾删除指定长度的字符串。如果长度超过已输入内容明文的长度，则清空字符串。默认删除一个字符。

如何运行 demo

在安装有 node.js 的机器上用命令行打开到当前目录，安装依赖 npm install 并运行 npm run demo

其它问题和注意事项

• rdata： 客户提供一个加密 salt 种子，客户对 salt 种子做 RSA + base64 加密，生成 rdata，客户将rdata 提供给 SDK 端
• 加密 salt 种子 所用 RSA 公钥：

-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDLKZvsaHArYPFESzDQWsEu5GJI
k95IqRJK7FfOYdxvDXrlHoapCjYETTpe1TA84G3z8QSLq29a28skD2m0EQXiq3qm
KovrQfd4KLRMT6z+ll51IU9EGRhR7aj2DA9+P/LctAzi6madR+yrd8Xo+CT5JYIE
1ETsWtV5E+Ws3Uc1MwIDAQAB
-----END PUBLIC KEY-----

• 本 SDK 未适配 PC 端网页和手机横屏的情况