为什么要自己写个HTML数字键盘
Dec 30, 2015
Jerray Fu
1 minute read

我们有个面向移动端的HTML页面,使用的时候需要在一个输入框里输入些数字。一开始的时候为了快速实现功能,直接放了个input框在那里。

结果就是使用的时候需要先点击输入框,弹出键盘以后要切换到数字键盘,接着才能输入数字。但是,你永远无法预知用户如何使用你的产品,很快我们就发现有乱七八糟的字符被提交上来了。可是我们要的只是数字而已。于是,给input框绑了个事件,每次用户输入之后检查用户输入的内容,如果内容不是数字,那就不写进input框里。

如果事情就这样结束了可能还要花好久我们才能想到自己写个数字键盘。由于用户的移动设备的差异,input框检查需要兼容很多情况,各种浏览器,各种输入法。虽然我们在各种测试机上测试都没问题,但是还是有反馈说能输入框里能输入中文。甚至把input的type属性改成了number也没用。

想了想这么下去也不是办法,还不如自己写个HTML版本的键盘。这样不仅能够掌控用户操作,使体验趋于一致,还能极大减少兼容性问题。

功能要点

  1. 点击数字键的时候能够正确追加数字
  2. 只能输入一个小数点
  3. 点击删除键的时候能正确去掉尾部的字符

花边儿功能

  1. 如果内容为0,输入其他数字时变为其他数字
  2. 如果还未输入内容,点击两次0的时候只追加一个0
  3. 如果还未输入内容,点击小数点的时候在前面补0
  4. 默认只能输入两位小数
  5. 提供初始化完成的回调
  6. 提供按键按下和弹起的回调
  7. 提供键盘滑入滑出效果和调用方法

实现

从上面的功能来看,其实只是一个简单的状态机而已,并没有任何复杂的功能,实现难度简直一星。无非是写点HTML标签当作按键,每个按键上绑定点击事件,然后根据点击的按键把输入值传给状态机就可以了。

这里只有一个问题就是监听什么事件。最先想到的还是监听click事件,在PC浏览器上测试完全没问题。但是手机的浏览器对click的处理有个几百毫秒的延迟,导致用起来一点也不流畅。于是改为监听touchstart,这样就会随着点击立刻触发事件了。调试的时候可以使用Chrome来调试,打开开发者工具,然后点击上面那个手机状的小图标开启手机模式。

代码

一开始没想过独立成一个模块的。我们在前端页面里插入了Bugsnag错误上报,发现任何未catch的错误都会上报到Bugsnag,主要用来发现客户端异常。但是后来发现很多来自127.0.0.1/Users/some-user-name/path/xxx.html发来的异常。想了想这个页面也没啥值得撸的,能扒的也就只有键盘了。恰巧也正要模块化给其他的页面用,也没什么技术难度,于是丢到了GitHub上。

仓库地址:JK-Keyboard

NPM: JK-Keyboard



comments powered by Disqus