vue表单验证 input输入框禁止输入空格

测试小姐姐让输入框不允许输入空格，安排。

刚开始用的下面这个方法，因为我是电脑端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"

个人前端博客 http://sharedblog.cn/

原文地址 http://sharedblog.cn/post/205.html

前端软件下载 http://iqzhan.com/category-23.html