解决input框中的空格问题

为何要解决input框输入空格的问题

在我们日常工作的前后端交互中会经常通过form表单来提交input框中的内容，但是例如用户名、密码等输入框我们是不能让其输入空格的，以账号来说，如果用户无意间输入了空格，那么可能导致他的用户名一直输入错误。

解决input中的空格常用的方式

常用方式如下：

1. .trim() ，函数用于去除字符串两端的空白字符（弊端：无法去除中间的空格）；
2. 匹配正则表达式把空格修改为空字符串；
3. 监听键盘事件，如果触发e.keyCode == 32 则return；

通过.trim()来解决，会在获取到字符串之后把两头空格删除

$(function () { 
    var str = "        There are Spaces at both ends          ";
	str.trim()
	console.log(str)  //输出的则为There are Spaces at both ends
})

通过匹配正则表达式来实现空格的消除

通过正则校验的方式有很多种，一般来说主要是监听键盘事件和input框的改变

1.通过注册键盘监听事件

$(function () { 
	document.getElementById('#input').onkeyup = function(){  //keyup可以换为keydown/keypress具体使用哪个看情况而定
	  this.value=this.value.replace(/\s/g, "")
	}
})

2.对动态渲染的元素进行注册键盘事件(事件委托)

$(function () { 
 $(document).find("input").on("keyup",function(e){ //keyup可以换为keydown/keypress具体使用哪个看情况而定
        this.value=this.value.replace(/\s/g, "")
    })
})

无论是onkeydown/onkeypress/onkeyup三者的哪一种都只是仅限于了监听键盘事件具体弊端在下文
3. input的onchange事件（弊端：只有在input失焦之后才会执行）

<input type="text" id="fname" onchange="myFunction()">
<script>
    function myFunction(){
        var x=document.getElementById("fname");
        x.value=x.value.toUpperCase();
     }
</script>

以上几种方式虽然可以杜绝用户在input框中输入空格，但是无法显示用户通过鼠标点击粘贴，粘贴到input中的空格

    $(document).find("input").on("input",function(e){
        this.value=this.value.replace(/\s/g, "")
    })

通过input的input事件，可以进行代码的实时监控，主要input 的值一发生改变就可以检测到，所以不仅杜绝了用户通过键盘来输入的空格，还禁用掉了通过鼠标粘贴进去的空格！