1. 程式人生 > 程式設計 >vue表單驗證之禁止input輸入框輸入空格

vue表單驗證之禁止input輸入框輸入空格

測試小姐姐讓輸入框不允許輸入空格,安排。

剛開始用的下面這個方法,因為我是電腦端f12的情況下除錯移動端,所以下面這個方法可以實現禁止輸入空格,於是就打包測試上線了,上線後才發現真機中不支援,應該是pc端和移動端事件不一樣,所以如果你是pc端,可以使用下面這個方法。

vue表單驗證之禁止input輸入框輸入空格

input上新增下方程式碼(我用的vant也一樣,包括elemenui等)

@keydown.native="keydown($event)"

methods中寫入下方程式碼

methods:{
  // 禁止輸入空格
  keydown(e){
		if(e.keyCode == 32){
			e.returnValue = false
		}
  }
}

最終使用的下面這個方法,移動端和pc端都可以禁止輸入空格

vue表單驗證之禁止input輸入框輸入空格

input上新增下方程式碼(我用的vant也一樣)

:onkeyup="visitUserName = visitUserName.replace(/\s+/g,'')"

最後分享一個小知識

使用 v-model.trim 可以實現去除輸入框的前後空格,中間內容多個空格會保留一個

v-model.trim="visitUserName"

到此這篇關於vue表單驗證之禁止input輸入框輸入空格的文章就介紹到這了,更多相關vue禁止input輸入框輸入空格內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!