黑马程序员技术交流社区

标题: 【上海校区】受够了移动端的数字输入，我用vue写了个模... [打印本页]

---

作者: 不二晨    时间: 2018-8-3 10:26
标题: 【上海校区】受够了移动端的数字输入，我用vue写了个模...
前言在H5开发过程中，涉及到用户输入的表单时，有一个非常常见的场景：输入数字，在此基础上往往还会涉及到限定数字范围等一系列逻辑处理。
这些限定倒还好说，我受不了的是设备键盘，目前常见的处理方式是用type="tel"直接唤起手机号码的键盘，如果想要输入负号，就只能忍受默认键盘了。
无需再忍，造个轮子吧我决定自己造个轮子，刚好也有些奇怪的想法可以顺便支持下，于是就有了vue-input-keyboard。
我觉得目前这个轮子里还是有几个比较可以自得的特性的，比如可以直接拖拽替换任意位置的数字，比如光标定位，比如根据有效值范围动态预测按钮可用性，等等。


基础特性：

• 支持输入常规的数字值，支持负数，支持小数。
• 支持触控屏操作
• 支持 清除、删除和确认操作。delete （回退一格）、 clear （清空文本区）、 return （提交）
  

高级特性：

• 替换指定位数字：按住文本区字符后鼠标（或手指）移动到按键区的按键上释放，则使用目标按键的字符替换当前字符。
  
  • 如果是在 delete 键上释放，则为删除当前字符。（和直接点击删除键效果一致）
    

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

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

永无止尽的细节探索

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

安装和使用直接上 GitHub 链接吧，这里就不长篇大论粘贴 API 了。
github.com/wanyaxing/v…


作者：wanyaxing
链接：https://juejin.im/post/5b62d0d85188251b3d79eb4b

---

作者: 不二晨    时间: 2018-8-16 17:25
奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2