資訊專欄INFORMATION COLUMN
摘要：我來打自己臉了剛剛發(fā)現(xiàn)在中文輸入法下是無效的有人能解決這個問題么如果要求只能輸入數(shù)字怎么做設(shè)置那我如果想限制長度，此時會失效，限制長度太麻煩了并且還存在的一個問題是，當輸入的是小數(shù)時，鼠標懸停在上會提示請輸入有效值，兩個最接近的值為和，這對
我來打自己臉了!!!!...剛剛發(fā)現(xiàn)在中文輸入法下是無效的,有人能解決這個問題么
如果要求input只能輸入數(shù)字怎么做？
設(shè)置type="number" ? 那我如果想限制長度，此時maxLength=“6” 會失效，js限制長度？ 太麻煩了
并且type="number" 還存在的一個問題是，當輸入的是小數(shù)時，鼠標懸停在input上會提示“請輸入有效值，兩個最接近的值為0和1”，這對于用戶體驗來說非常差，非常容易誤導(dǎo)用戶，
那就只能設(shè)置type="text"了，但是設(shè)置type="text"又會導(dǎo)致input可以輸入非數(shù)字了，于是網(wǎng)上百度google找的一大堆各種通過js去控制的，比如onkeyup事件等，檢測到輸入的是非數(shù)字就截取掉，替換掉，這能夠?qū)崿F(xiàn)只能輸入數(shù)字，但是正如標題所說，只允許正整數(shù)和正小數(shù)，而且還存在字母e 和 輸入1.1.111.....1 這種情況,依然通過這些方法去實現(xiàn)未免太麻煩了
今天，分享一下自己實現(xiàn)只能輸入正整數(shù)和正小數(shù),一個vue指令就可以解決！
只能輸入正整數(shù)
根據(jù)keypress事件，監(jiān)視鍵盤keyCode碼，結(jié)合數(shù)字正則表達式 判斷鍵入的keyCode是否是數(shù)字，如果非數(shù)字則調(diào)用preventDefault事件阻止默認行為
代碼中的正則使得只能輸入0-9，其他所有的字符都無法輸入，簡單粗暴
Vue.directive("enterNumber", {
inserted: function (el) {
el.addEventListener("keypress",function(e){
e = e || window.event;
let charcode = typeof e.charCode == "number" ? e.charCode : e.keyCode;
let re = /d/;
if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
});
}
});
只能輸入正數(shù)(包含小數(shù))
這個指令是在上面指令上做的修改，即允許輸入小數(shù)點，但是如果單純的允許輸入小數(shù)點，那就會造成輸入1.1....1....1...1這種無數(shù)小數(shù)點的情況，所有這里的處理方式是如果小數(shù)點是第一次輸入則放行，但是在下次按下鍵盤上的小數(shù)點keyCode 時會對輸入的value值進行判斷，如果value值存在小數(shù)點，則調(diào)用preventDefault() 阻止事件
Vue.directive("enterNumber2", {
inserted: function (el) {
el.addEventListener("keypress",function(e){
e = e || window.event;
let charcode = typeof e.charCode == "number" ? e.charCode : e.keyCode;
let re = /d/;
if(charcode == 46){
if(el.value.includes(".")){
e.preventDefault();
}
return;
}else if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
});
}
});
使用方法
將上訴代碼放在main.js中，然后在input框上添加自定義指令，注意自定義指令要以v-開頭，并且駝峰命名要寫在小寫的形式
注:這時候的input框type只需要使用text類型就可以了，不要使用number類型，不然會出現(xiàn)“請輸入有效值，兩個最接近的值為0和1”
//在只允許輸入正整數(shù)的情況下，type="number" 可以防止輸入中文，step="0.0000000001" 可以處理輸入小數(shù)時的“請輸入有效值，兩個.....”
不知道這段代碼有沒有可優(yōu)化的地方，或者存在什么問題，如有其他更好的建議，歡迎留言
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97579.html
摘要：在這個過程中使用了一些正則表達式，使用合適的工具做合適的事情果然可以事半功倍?；镜氖褂梅椒ň褪且陨蠋追N，接下來對常用的正則表達式進行一下總結(jié)。 最近接到一個內(nèi)部搜索業(yè)務(wù)，本來是使用solr構(gòu)建的分詞搜索，但是在前期的數(shù)據(jù)量并沒有那么大的情況下，使用者反饋使用分詞反而不如精確匹配來的好用，所以運用相關(guān)正則表達式重寫了一套搜索接口直接進行數(shù)據(jù)庫檢索，準備等數(shù)據(jù)量大起來以后再接入solr。...
摘要：驗證是否含有等字符只能輸入漢字驗證地址驗證驗證電話號碼正確格式為，，，，，。驗證身份證號位或位數(shù)字驗證一年的個月正確格式為和驗證一個月的天正確格式為和。 一、校驗數(shù)字的表達式 1 數(shù)字：^[0-9]*$ 2 n位的數(shù)字：^d{n}$ 3 至少n位的數(shù)字：^d{n,}$ 4 m-n位的數(shù)字：^d{m,n}$ 5 零和非零開頭的數(shù)字：^(0|1-9*)$ 6 非零開頭的最多帶兩位小數(shù)的數(shù)字...
摘要：好處正則的出現(xiàn)，對字符串的復(fù)雜操作變得更為簡單。將正則和字符串關(guān)聯(lián)對字符串進行匹配。替換其實用的就是類中的獲取先要將正則表達式編譯成正則對象。用于描述正則表達式，可以對正則表達式進行解析。 定義 其實是用來操作字符串的一些規(guī)則。其實更多是用正則解決字符串操作的問題。 好處 正則的出現(xiàn)，對字符串的復(fù)雜操作變得更為簡單。 特點 將對字符串操作的代碼用一些符號來表示。只要使用了指定符號，就可...
摘要：一校驗數(shù)字的表達式數(shù)字位的數(shù)字至少位的數(shù)字位的數(shù)字零和非零開頭的數(shù)字非零開頭的最多帶兩位小數(shù)的數(shù)字帶位小數(shù)的正數(shù)或負數(shù)正數(shù)負數(shù)和小數(shù)有兩位小數(shù)的正實數(shù)有位小數(shù)的正實數(shù)非零的正整數(shù)或或非零的負整數(shù)或 一、校驗數(shù)字的表達式 數(shù)字：^[0-9]*$ n位的數(shù)字：^d{n}$ 至少n位的數(shù)字：^d{n,}$ m-n位的數(shù)字：^d{m,n}$ 零和非零開頭的數(shù)字：^(0|[1-9][0...
閱讀 2114·2021-11-23 09:51
閱讀 2855·2021-11-22 15:35
閱讀 2951·2019-08-30 15:53
閱讀 1051·2019-08-30 14:04
閱讀 3288·2019-08-29 12:39
閱讀 1819·2019-08-28 17:57
閱讀 1113·2019-08-26 13:39
閱讀 562·2019-08-26 13:34
