SafeKeyboard

H5安全键盘

应用场景

• 自定义输入框。SK提供获当前输入的API
• 利用提供的输入框。SK提供输入框绑定与数据获取
• [TODO] 系统默认输入框。SK提供数据绑定与位置计算

How To Use

Way1

var safeKeyboard = require('SafeKeyboard.js');

safeKeyboard.rebind();

$(document).off('build').on('build', function (event) {
		// dosth.
})

way2

<div class="safekeyboardinputer myinputer" id="skeyinputer"></div>
//  ....
<script>
var safeKeyboard = require('SafeKeyboard.js');
$('.sure').on('click', function () {            
		var input = safeKeyboard.getValue();
		alert(input);
})
</script>

[可选] Dom Attr 属性表

参数	value	说明	是否必选
class	safekeyboardinputer	默认样式	√
class	myinputer	自定义样式接口	×
id	skeyinputer	功能控制	√
type	number / identity / password	不同功能样式	×
placeholder	***	默认文案	×
value	123	默认值/展示	×
max-length	11	最大输入	×
autosubmit	true	搭配max-length使用，自动提交	×
autofocus	true	默认自动聚焦	×
pattern	正则	规则	×

[可选] 键盘功能接口

参数	说明
show	键盘显示
hide	键盘隐藏
getValue	获取当前值
rebind	重新绑定

实际问题思考

• 单页应用，多个页面每个页面有一个输入框，键盘咋搞？？！！

键盘定位是个【单例应用】，一旦创建就不会再次创建，只做隐藏处理

• 页面没有输入框

只输出结果，不执行绑定input

todo

• 多个输入框
• 键盘与文本流的覆盖关系

后期规划

应用场景

• 数字密码 (789465)
• 银行卡 (6214 8301 8552 1452)
• 有效期 (10/23)
• CVV2 (223)
• 身份证(4856457987444565464X)
• 金额 (9.81)

关键点

• 键盘类
• 按钮类
• 按钮跟键盘关联
  • 按钮展示顺序
  • 按钮点击回调
  • 按钮与输入框绑定
  • 键盘位置置底
  • 键盘与文本关系

API

input 属性：

• type
• placeholder
• max-length
• autofocus
• value
• pattern [todo]
• autosubmit(max-length)

方法属性:

• callback

方法：

• create
• destroy
• show
• hide

解决问题

• 图片svg
• meta梳理
• fastclick
• 禁止长按
• 动画、缩放

一些常识

编译：

sh build.sh

更新Npm包

• npm version patch, 此命令会把package.json的version更新到0.02
• 然后执行npm publish就可以更新到npm了