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了