我來打自己臉了!!!!...剛剛發(fā)現(xiàn)在中文輸入法下是無效的,有人能解決這個問題么
如果要求input只能輸入數(shù)字怎么做饥侵？
設(shè)置type="number" ? 那我如果想限制長度鸵赫，此時maxLength=“6” 會失效，js限制長度躏升？ 太麻煩了
并且type="number" 還存在的一個問題是辩棒，當(dāng)輸入的是小數(shù)時，鼠標(biāo)懸停在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ù)字育八，但是正如標(biāo)題所說，只允許正整數(shù)和正小數(shù)赦邻，而且還存在字母e 和 輸入1.1.111.....1 這種情況,依然通過這些方法去實現(xiàn)未免太麻煩了
今天髓棋，分享一下自己實現(xiàn)只能輸入正整數(shù)和正小數(shù),一個vue指令就可以解決！
只能輸入正整數(shù)
根據(jù)keypress事件深纲，監(jiān)視鍵盤keyCode碼仲锄，結(jié)合數(shù)字正則表達(dá)式 判斷鍵入的keyCode是否是數(shù)字劲妙，如果非數(shù)字則調(diào)用preventDefault事件阻止默認(rèn)行為
代碼中的正則使得只能輸入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值進(jìn)行判斷芯义，如果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”
<input type="text" v-enter-number2 >
<input type="number" step="0.0000000001" v-enter-number >
//在只允許輸入正整數(shù)的情況下，type="number" 可以防止輸入中文计盒，step="0.0000000001" 可以處理輸入小數(shù)時的“請輸入有效值渴频，兩個.....”
