受夠了移動端的數字輸入,我用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 了。
後語
一時衝動造了個輪子,請用力點贊
,謝謝。
感謝阿星
相關推薦
受夠了移動端的數字輸入,我用vue寫了個模擬鍵盤
前言 在H5開發過程中,涉及到使用者輸入的表單時,有一個非常常見的場景:輸入數字,在此基礎上往往還會涉及到限定數字範圍等一系列邏輯處理。 這些限定倒還好說,我受不了的是裝置鍵盤,目前常見的處理方式是用type="tel"直接喚起手機號碼的鍵盤,如果想要輸入負號,就只能
擔心酒店資訊洩露,我用Python寫了段加密演算法,看你怎麼破
前段時間的酒店資訊洩露事情,鬧的沸沸揚揚!確實我們很多的資料在網路上都是裸奔,在資料庫裡面躺著也都是明文資料,連我自己的寫某某程式都被熱情的粉絲攻破!不如,我們用萬能的Python寫段加密資料傳送玩玩,也許就能避免酒店資料洩漏了! 簡單的場景: Serve
我用Vue寫了個部落格園WebApp
使用了Node和Vue寫了個部落格園的移動端WebApp,想拿出來與大家分享下,也談談我遇到的坑。由於時間問題,目前還剩“快閃記憶體”,“博問”這兩塊還沒做完。先分享下截圖吧。 我呢,就從技術,部署,以及遇到的坑來講吧,當然啦,首
用vue寫了個移動端車牌輸入鍵盤
mar ace max UNC btn 代碼 this 大神 nsf 話不多說,先看圖 初學vue,斷斷續續花了一天半才寫出來.... 寫樣式真的很麻煩 下面上代碼 html 1 <template> 2 <section class=
發生了這4件事,我給Python跪了!
今天要講 4 個關於 Python 程式語言的故事,來看看人工智慧時代爆發的 Python。 在這裡先不告訴你 Python 是“最好的程式語言”(無論什麼意思)。言歸正傳,我們到底該不該選擇 Python? ▌1 如果想成為一名程式設計師?快點學會Python
這一天,我用 Rust 重寫了已有 19 年曆史的 C++ 庫!
從版本 56 開始,Firefox 瀏覽器支援一種新的字元編碼轉換庫,叫做 encoding_rs。它是用 Rust 編寫的,代替了從 1999 年就開始使用的 C++ 編寫的字元編碼庫 uconv。最初,所有呼叫該字元編碼轉換庫的程式碼都是 C++,所以儘管新的庫是用 Rust
想在家看VIP電影,我用python做了個破解軟體,她很開心!
執行平臺: Windows Python版本: Python3.x IDE: Sublime text3 一、前言 沒有會員,想線上觀看或下載愛奇藝、PPTV、優酷、網易公開課、騰訊視訊、搜狐視訊、樂視、土豆、A站、B站等主流視訊網站的VIP視訊?又不想充會員怎麼辦?博主本次寫的VI
雙十一之前,我用python跑了個指令碼
先上指令碼: #!/usr/bin/env python # -*- coding:utf-8 -*- import requests from fake_useragent import UserAgent ua = UserAgent() def getHTMLT
如何剔掉 sql 語句中的尾巴,我用 C# 苦思了五種辦法
## 一:背景 ### 1. 講故事 這幾天都在修復bug真的太忙了,期間也遇到了一個挺有趣bug,和大家分享一下,這是一塊sql挺複雜的報表相關業務,不知道哪一位大佬在錯綜複雜的 `巢狀 + 平行` if判斷中sql拼接在某些UI組合下出問題了,最終的 sql 架構類似這樣的。 ``` sql
我用Python寫了一個共享單車的應用程式!下一個摩拜單車會是我嗎
學習如何使用 Redis 和 Python 構建一個位置感知的應用程式。 我經常出差。但不是一個汽車狂熱分子,所以當我有空閒時,我更喜歡在城市中散步或者騎單車。我參觀過的許多城市都有共享單車系統,你可以租個單車用幾個小時。大多數系統都有一個應用程式來幫助使用者定位和租用他們的單車,但對於像我這樣
我用Python寫了一個搜尋引擎
開玩笑啦,我所謂的搜尋引擎就是自己在小範圍內的網頁內進行搜尋的一個工具,總共程式碼也就兩三百行,自然沒法跟google和百度比啦。主要是長時間沒有使用python寫過程式碼了,為免生疏,就在上班之餘寫了這麼一個小東西。 先來看一下文件。 =======
「懶惰的美德」我用 python 寫了個自動生成給文件生成索引的指令碼
我用 python 寫了一個自動生成索引的指令碼 簡介:為了刷演算法題,建了一個 GitHub倉庫:PiperLiu / ACMOI_Journey,記錄自己的刷題軌跡,並總結一下方法、心得。想到一個需求:能不能在我每新增一條題目的筆記後,利用程式自動地將其歸類、建立索引?用 Python 實現一個入門級的
移動端input輸入框調起,頁面上推,輸入框關閉無法恢復
輸入框 input 無法 失去 移動端 當前 焦點 生效 寫法 最近做h5 input調起輸入框,頁面上推,輸入框關閉無法恢復的問題,當時就覺得很奇怪,因為是整個body上推 ,無法恢復,但是稍微點擊一下屏幕,body就恢復了,所以當時想的解決方案就是當輸入框失去焦點的可以
移動端WEB開發,click,touch,tap事件淺析
func mousedown spa 手指 滑動 兼容性 over syntax ack 一、click 和 tap 比較 兩者都會在點擊時觸發,但是在手機WEB端,click會有 200~300 ms,所以請用tap代替click作為點擊事件。 singleTap和dou
jsp頁面在 移動端 自適應,chrome瀏覽器沒問題,可是safari瀏覽器有問題的解決方法
ref orm one 方法 viewport 轉載 min maximum 顯示 在網頁中設置的1px與物理像素中的1px不會相同,所以導致不同在不同手機上顯示結果都不相同,通過以下設置找到了適合當前網頁自適應不同手機、不同瀏覽器的辦法,代碼如下: “ <meta
JQ 移動端返回頂部,往下滑動時顯示返回按鈕,往上滑動時隱藏返回按鈕
hid 獲取 scroll var 返回 向上 區域 手勢 默認 returnTop:function(){ //預定義返回頂部的html代碼,它的css樣式默認為不顯示 var gotoTop_html = ‘<div class
移動端車牌識別,OCR光學字符識別技術
保險 算法 交通 清華 alt 技術與市場 jpg 成功 支持 移動端車牌識別技術,是在OCR光學字符識別技術的基礎上研發的用來識別汽車號牌特征信息的圖像識別技術。在國內,該項技術由北京易泊時代攜手清華大學成功地將"國家863計劃"項目成果——"文字圖像識別技術TH-OCR
js 類似於移動端購物車刪除,左移動刪除
abs event 左移 style script es2017 var -1 dev <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
移動端 input 輸入框實現自帶鍵盤“搜索“功能並修改X
cancel 文字 webkit 自動 border search 輸入 func 不同 主要利用html5的,input[type=search]屬性來實現,此時input和type=text外觀和功能沒啥區別; html代碼入下: <form action=""
看一本python書,猜數字遊戲是入門,然後就自己寫了下
水平不高,就想寫一寫,功能實現了,但不完善,如果亂輸入就會出現問題,後續再把程式碼完善下,今天沒時間了,貼上程式碼,共同學習。相容版本3和2均可以直接拿程式碼測試。 #coding:utf-8 # 這是一個猜數字遊戲 import random import sys class Guess