文章詳情頁
vue表單驗證之禁止input輸入框輸入空格
瀏覽:13日期:2022-10-21 13:06:07
測試小姐姐讓輸入框不允許輸入空格,安排。
剛開始用的下面這個方法,因為我是電腦端f12的情況下調試移動端,所以下面這個方法可以實現禁止輸入空格,于是就打包測試上線了,上線后才發現真機中不支持,應該是pc端和移動端事件不一樣,所以如果你是pc端,可以使用下面這個方法。
input上添加下方代碼(我用的vant也一樣,包括elemenui等)
@keydown.native='keydown($event)'
methods中寫入下方代碼
methods:{ // 禁止輸入空格 keydown(e){if(e.keyCode == 32){e.returnValue = false} }}
最終使用的下面這個方法,移動端和pc端都可以禁止輸入空格
input上添加下方代碼(我用的vant也一樣)
:onkeyup='visitUserName = visitUserName.replace(/s+/g,’’)'
最后分享一個小知識
使用 v-model.trim 可以實現去除輸入框的前后空格,中間內容多個空格會保留一個
v-model.trim='visitUserName'
到此這篇關于vue表單驗證之禁止input輸入框輸入空格的文章就介紹到這了,更多相關vue禁止input輸入框輸入空格內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!
標簽:
Vue
相關文章:
1. Docker究竟是什么 為什么這么流行 它的優點和缺陷有哪些?2. idea打開多個窗口的操作方法3. IntelliJ IDEA設置編碼格式的方法4. IDEA 重新導入依賴maven 命令 reimport的方法5. 如何通過vscode運行調試javascript代碼6. Java14發布了,再也不怕NullPointerException了7. IntelliJ IDEA 2020.2正式發布,兩點多多總能助你提效8. Intellij IDEA 閱讀源碼的 4 個絕技(必看)9. IntelliJ IDEA 統一設置編碼為utf-8編碼的實現10. IntelliJ IDEA設置背景圖片的方法步驟
排行榜
