前言
在 H5 开发过程中, 涉及到用户输入的表单时, 有一个非常常见的场景: 输入数字, 在此基础上往往还会涉及到限定数字范围等一系列逻辑处理.
这些限定倒还好说, 我受不了的是设备键盘, 目前常见的处理方式是用 type="tel" 直接唤起手机号码的键盘, 如果想要输入负号, 就只能忍受默认键盘了.
无需再忍, 造个轮子吧
我决定自己造个轮子, 刚好也有些奇怪的想法可以顺便支持下, 于是就有了 https://github.com/wanyaxing/vue-input-keyboard .
我觉得目前这个轮子里还是有几个比较可以自得的特性的, 比如可以直接拖拽替换任意位置的数字, 比如光标定位, 比如根据有效值范围动态预测按钮可用性, 等等.
基础特性:
支持输入常规的数字值, 支持负数, 支持小数.
支持触控屏操作
支持 清除, 删除和确认操作. delete (回退一格), clear (清空文本区), return (提交)
高级特性:
替换指定位数字: 按住文本区字符后鼠标 (或手指) 移动到按键区的按键上释放, 则使用目标按键的字符替换当前字符.
如果是在 delete 键上释放, 则为删除当前字符.(和直接点击删除键效果一致)
支持光标锚点移动:
点击文本区字符则光标定位到改字符右侧(此时点击删除会删除光标左侧的字符即当前字符)
按住文本区字符鼠标 (或手指) 在文本区滑动, 光标也会随之移动.
点击文本区左侧的空白区域则光标定位到首位字符左侧(当光标左侧没有字符时, 点击删除键会删除首位字符)
预测数值有效性并动态展示按键的可点击状态
永无止尽的细节探索
如果数值范围不包含 0, 这个问题很复杂, 不过, 搞定了, 现在可以智能判断哪些键可用, 一步步引导用户去输入数字最终达到有效范围之内.
如果初始值不是一个有效值怎么办? 标红, 要么你就放弃修改, 否则请手动修正重做, 反正不准提交,
自动优化首位为 0 或点号的各种奇葩情况, 比如 1000 删除首位 1 之后应该归位为一个 0, 比如 0.01 删除首位 0 会怎样?
再强调下, 什么情况下什么键可以点还是不可以点, 这个问题太复杂了, 目前大部分场景已搞定.
光标锚点也分左右哦, 左侧光标只支持首位情况下存在, 不管光标是在文字左侧还是右侧, 插入文字或替换都以光标的左侧区域为准.
disabled 的属性值可以是空, 可以是 true, 可以是 1, 反正都支持.
如果属性 min 大于 max 会怎样? 我觉得应该智能判断, 允许这种特殊情况, 不都这说么字文序顺不响影阅读嘛.
换句话说, min 值和 max 值在设置属性时也不必强行设定为数字, 字符串也认的, 反正就是让你懒得去计较这些细节就是, 懒是科学发展之父.
安装和使用
直接上 GitHub https://github.com/wanyaxing/vue-input-keyboard 链接吧, 这里就不长篇大论粘贴 API 了.
https://github.com/wanyaxing/vue-input-keyboard
来源: https://juejin.im/post/5b62d0d85188251b3d79eb4b