safekeyboard

1.0.4 • Public • Published

SafeKeyboard Build Status language

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了

Readme

Keywords

Package Sidebar

Install

npm i safekeyboard

Weekly Downloads

5

Version

1.0.4

License

ISC

Last publish

Collaborators

  • keelvin