美文网首页
vue表单验证 input输入框禁止输入空格

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

作者: Angel_6c4e | 来源:发表于2021-08-19 14:08 被阅读0次

方法一:@keydown.native
应该是pc端和移动端事件不一样,所以如果你是pc端,可以使用下面这个方法

 <el-input
     type="text"
     v-model="editForm.productionBatch"
     placeholder="生产批次"
     style="width: 250px; height: 30px"
     @keydown.native="keydown($event)"
/>

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

方法二:.trim
使用 v-model.trim 可以实现去除输入框的前后空格,中间内容多个空格会保留一个

 <el-input
       type="text"
       v-model.trim="searchForm.productionBatch"
       placeholder="生产批次"
       style="width: 250px; height: 30px"
              />

方法三:@onkeyup
移动端和pc端都可以禁止输入空格

 <el-input
        type="text"
        v-model="searchForm.productionBatch"
        placeholder="生产批次"
        style="width: 250px; height: 30px"
        :onkeyup="searchForm.productionBatch= searchForm.productionBatch.replace(/\s+/g,'')"
              />

相关文章

网友评论

      本文标题:vue表单验证 input输入框禁止输入空格

      本文链接:https://www.haomeiwen.com/subject/xnaobltx.html