阿星的博客

受够了移动端的数字输入,我用vue写了个模拟键盘

前言

在H5开发过程中,涉及到用户输入的表单时,有一个非常常见的场景:输入数字,在此基础上往往还会涉及到限定数字范围等一系列逻辑处理。

这些限定倒还好说,我受不了的是设备键盘,目前常见的处理方式是用type="tel"直接唤起手机号码的键盘,如果想要输入负号,就只能忍受默认键盘了。

无需再忍,造个轮子吧

我决定自己造个轮子,刚好也有些奇怪的想法可以顺便支持下,于是就有了vue-input-keyboard

我觉得目前这个轮子里还是有几个比较可以自得的特性的,比如可以直接拖拽替换任意位置的数字,比如光标定位,比如根据有效值范围动态预测按钮可用性,等等。

feature_mini.gif

基础特性:

  • 支持输入常规的数字值,支持负数,支持小数。

  • 支持触控屏操作

  • 支持 清除、删除和确认操作。delete (回退一格)、 clear (清空文本区)、 return (提交)

    高级特性:

  • 替换指定位数字:按住文本区字符后鼠标(或手指)移动到按键区的按键上释放,则使用目标按键的字符替换当前字符。

    • 如果是在 delete 键上释放,则为删除当前字符。(和直接点击删除键效果一致)

    feature_replace

  • 支持光标锚点移动:

    • 点击文本区字符则光标定位到改字符右侧(此时点击删除会删除光标左侧的字符即当前字符)
      • 按住文本区字符鼠标(或手指)在文本区滑动,光标也会随之移动。
    • 点击文本区左侧的空白区域则光标定位到首位字符左侧(当光标左侧没有字符时,点击删除键会删除首位字符)

    feature_cursor_move

  • 预测数值有效性并动态展示按键的可点击状态

永无止尽的细节探索

  • 如果数值范围不包含0,这个问题很复杂,不过,搞定了,现在可以智能判断哪些键可用,一步步引导用户去输入数字最终达到有效范围之内。
  • 如果初始值不是一个有效值怎么办?标红,要么你就放弃修改,否则请手动修正重做,反正不准提交,
  • 自动优化首位为0或点号的各种奇葩情况,比如1000删除首位1之后应该归位为一个0,比如0.01删除首位0会怎样?
  • 再强调下,什么情况下什么键可以点还是不可以点,这个问题太复杂了,目前大部分场景已搞定。
  • 光标锚点也分左右哦,左侧光标只支持首位情况下存在,不管光标是在文字左侧还是右侧,插入文字或替换都以光标的左侧区域为准。
  • disabled 的属性值可以是空,可以是true,可以是1,反正都支持。
  • 如果属性 min 大于 max 会怎样?我觉得应该智能判断,允许这种特殊情况,不都这说么字文序顺不响影阅读嘛。
  • 换句话说,min值和max值在设置属性时也不必强行设定为数字,字符串也认的,反正就是让你懒得去计较这些细节就是,懒是科学发展之父。

安装和使用

直接上 GitHub 链接吧,这里就不长篇大论粘贴 API 了。

https://github.com/wanyaxing/vue-input-keyboard

后语

一时冲动造了个轮子,请用力点赞,谢谢。

原文来自阿星的博客:https://wanyaxing.com/blog/20180802170741.html

X