JavaScript使用鍵盤輸入控制實(shí)現(xiàn)數(shù)字驗(yàn)證功能
現(xiàn)在有一個(gè)需求如下圖:
產(chǎn)品經(jīng)理說Card Number只能讓輸入數(shù)字(中間的空格是格式自加的,也是用js實(shí)現(xiàn)的),有時(shí)候我腦海中出現(xiàn)了個(gè)聲音,啥玩意,加個(gè)type=number不就行了,事實(shí)發(fā)現(xiàn)圖樣圖森破了,先不說type=number后面會(huì)有個(gè)上下標(biāo)(雖然用css可干掉),但是這個(gè)類型是支持科學(xué)輸入法的,就是小數(shù)點(diǎn)和e這樣的是可以輸入的,于是乎只能用其他的方式了,后來想用檢索到輸入了非數(shù)字就干掉,但是這樣還是能輸入,想法被打回,于是乎最終采用了鍵盤輸入控制的辦法,其實(shí)很簡單,代碼如下:
var isNumber=function(keyCode){ // 數(shù)字 if (keyCode >= 48 && keyCode <= 57) { return true; } // 小數(shù)字鍵盤 if (keyCode >= 96 && keyCode <= 105) { return true; } //tab Backspace, del, 左右方向鍵 if (keyCode == 9||keyCode == 8|| keyCode == 32 || keyCode == 46 || keyCode == 37 || keyCode == 39) { return true; } return false }
所謂鍵盤輸入控制就是根據(jù)鍵盤輸入的keycode來判斷輸入的是什么類型,即獲取按下的鍵盤按鍵Unicode值,鍵盤上每個(gè)按鍵對應(yīng)的keycode是固定的,網(wǎng)上有很多對照表,我這里就不貼上去了,每一次按鍵監(jiān)測到對應(yīng)的keycode然后對照是否合法,需要注意的是這里合法的不僅是數(shù)字,還有上下左右tab和空格方向鍵,不能禁用用戶的操作指令,怎么樣,看起來很簡單吧。
相關(guān)文章
基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02Bootstrap3.0建站教程(一)之bootstrap表單元素排版
本文給大家介紹Bootstrap3.0建站教程(一)之bootstrap表單元素排版,本文給大家列舉了文字和輸入框前后排列和上下排列的實(shí)例代碼,有需要的朋友參考下吧2016-06-06layui 實(shí)現(xiàn)二級彈窗彈出之后 關(guān)閉一級彈窗的方法
今天小編就為大家分享一篇layui 實(shí)現(xiàn)二級彈窗彈出之后 關(guān)閉一級彈窗的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09基于JS簡單實(shí)現(xiàn)手持彈幕功能+文字抖動(dòng)特效代碼
這篇文章主要介紹了基于JS簡單實(shí)現(xiàn)手持彈幕功能+文字抖動(dòng)特效代碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03javascript事件循環(huán)event loop的簡單模型解釋與應(yīng)用分析
這篇文章主要介紹了javascript事件循環(huán)event loop的簡單模型解釋與應(yīng)用,結(jié)合實(shí)例形式分析了javascript事件循環(huán)event loop的與模型原理及使用技巧,需要的朋友可以參考下2020-03-03Javascript農(nóng)歷與公歷相互轉(zhuǎn)換的簡單實(shí)例
下面小編就為大家?guī)硪黄狫avascript農(nóng)歷與公歷相互轉(zhuǎn)換的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10