解决input框中的空格问题
为何要解决input框输入空格的问题
在我们日常工作的前后端交互中会经常通过form表单来提交input框中的内容,但是例如用户名、密码等输入框我们是不能让其输入空格的,以账号来说,如果用户无意间输入了空格,那么可能导致他的用户名一直输入错误。
解决input中的空格常用的方式
常用方式如下:
- .trim() ,函数用于去除字符串两端的空白字符(弊端:无法去除中间的空格);
- 匹配正则表达式把空格修改为空字符串;
- 监听键盘事件,如果触发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 的值一发生改变就可以检测到,所以不仅杜绝了用户通过键盘来输入的空格,还禁用掉了通过鼠标粘贴进去的空格!