前端对于处理空格问题场景总结

语言: CN / TW / HK

禁止input输入所有空格

方法1

<input type="text" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" />
复制代码

方法2

<input type="text" onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')">
复制代码

去字符串的首尾空格

String.prototype.trim()

<input type="test" v-model.trim="keyword" >
复制代码

注意:是提交字段的时候去除首尾空格,但是空格还是能够输入的 禁止输入首尾空格,能输入中间空格

方法1

<input  v-model="keyword" placeholder="原生input框"  />
//watch监听
watch: {
    keyword(newval) {
      this.keyword = newval.trim()
    }
}
复制代码

注意:这种方式只适合原生input框,假如说v-model是用在第三方的封装组件中的,那么监听keyword关键字禁止输入两边空格是没效果的 原因:未知
解决办法:监听输入空格的键盘事件

<myInput  v-model="entry" @keyup.space.native="submit"  ></myInput>
submit (event) {
    this.entry=this.entry.trim()
 }
复制代码

注意:监听组件根元素要用native修饰符 当然,如果你想用ref直接来修改value的值,这样也不行,如果你了解v-model的原理的话,就知道,其实v-model就是传入一个value的prop属性,当你直接修改这个属性值时,vue会发发出警告

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value

大意就是: 避免直接更改prop,因为每当父组件重新渲染时,该值都会被覆盖。而是使用基于属性值的数据或计算属性来修改此值 那如果是自己封装的v-model组件可以在组件中用一个计算属性来去除空格,然后再传值给input的value - 自己封装的v-model组件

<template>
  <div class="item">
    <input
      :value="setValue"
      @input="input($event)"
      placeholder="自定义组件的v-model"
    />
  </div>
</template>
<script>
export default {
  props: {
    value: String
  },
  data() {
    return {}
  },
  computed: {
    //为了去除空格
    setValue() {
      return this.value.trim()
    }
  },
  methods: {
    input(event) {
      this.$emit('input', event.target.value)
    }
  }
}
</script>
复制代码

引用组件 附:文档地址 cn.vuejs.org/v2/guide/co…

分享到: