禁止输入框输入空格

作者 BiYuqi 日期 2017-04-11
禁止输入框输入空格

做表单验证,输入框经常要做判断,群里也经常看到有朋友问,所以做了下记录,自动过滤空格,

DEMO

DEMO

实现原理

说下实现思路吧,其实就是监听输入框输入的类型,进行空格检测,正则一旦检测到空格,立即对当前值输入框进行赋值,赋值为过滤空格后的值

<input type="text" class="test">

原生JS

var input = document.querySelector('.test'),
reg = /\s/;
input.oninput = function(){
if(reg.test(this.value)){
//过滤赋值
input.value = this.value.replace(reg,'');
return;
}
}

JQ版

var input = $('.test'),
reg = /\s/;
input.on('input',function(){
var val = $(this).val();
if(reg.test(val)){
//过滤赋值
input.val(val.replace(reg,''));
return;
}
}

Vue版本

<input type="text" class="test" v-model="message">

在Vue里面因为需要实时监听值得变化,所以需要在watch里面监听

watch: {
message: function() {
const reg= /\s/;
if(reg.test(this.message)){
this.message = this.message.replace(reg,'');
return;
}
}
}