mysql查询并去除中所有数据的首尾空格_前端对于处理空格问题场景总结

禁止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>

引用组件

<myInput  v-model="keyword" ></myInput>

附：文档地址 https://cn.vuejs.org/v2/guide/components.html#ad