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