vue表單驗(yàn)證之禁止input輸入框輸入空格
測試小姐姐讓輸入框不允許輸入空格,安排。
剛開始用的下面這個(gè)方法,因?yàn)槲沂请娔X端f12的情況下調(diào)試移動(dòng)端,所以下面這個(gè)方法可以實(shí)現(xiàn)禁止輸入空格,于是就打包測試上線了,上線后才發(fā)現(xiàn)真機(jī)中不支持,應(yīng)該是pc端和移動(dòng)端事件不一樣,所以如果你是pc端,可以使用下面這個(gè)方法。
input上添加下方代碼(我用的vant也一樣,包括elemenui等)
@keydown.native='keydown($event)'
methods中寫入下方代碼
methods:{ // 禁止輸入空格 keydown(e){if(e.keyCode == 32){e.returnValue = false} }}
最終使用的下面這個(gè)方法,移動(dòng)端和pc端都可以禁止輸入空格
input上添加下方代碼(我用的vant也一樣)
:onkeyup='visitUserName = visitUserName.replace(/s+/g,’’)'
最后分享一個(gè)小知識(shí)
使用 v-model.trim 可以實(shí)現(xiàn)去除輸入框的前后空格,中間內(nèi)容多個(gè)空格會(huì)保留一個(gè)
v-model.trim='visitUserName'
到此這篇關(guān)于vue表單驗(yàn)證之禁止input輸入框輸入空格的文章就介紹到這了,更多相關(guān)vue禁止input輸入框輸入空格內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. XML入門的常見問題(一)2. html小技巧之td,div標(biāo)簽里內(nèi)容不換行3. PHP字符串前后字符或空格刪除方法介紹4. AspNetCore&MassTransit Courier實(shí)現(xiàn)分布式事務(wù)的詳細(xì)過程5. jsp cookie+session實(shí)現(xiàn)簡易自動(dòng)登錄6. css進(jìn)階學(xué)習(xí) 選擇符7. 將properties文件的配置設(shè)置為整個(gè)Web應(yīng)用的全局變量實(shí)現(xiàn)方法8. 解析原生JS getComputedStyle9. Echarts通過dataset數(shù)據(jù)集實(shí)現(xiàn)創(chuàng)建單軸散點(diǎn)圖10. nestjs實(shí)現(xiàn)圖形校驗(yàn)和單點(diǎn)登錄的示例代碼
