受夠了移動端的數字輸入，我用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.com/blog/201808…