解决input框中的空格问题 |
您所在的位置：网站首页 › raptor输入框怎么输入几个值 › 解决input框中的空格问题 |
|
解决input框中的空格问题
为何要解决input框输入空格的问题解决input中的空格常用的方式通过.trim()来解决，会在获取到字符串之后把两头空格删除通过匹配正则表达式来实现空格的消除通过正则校验的方式有很多种，一般来说主要是监听键盘事件和input框的改变以上几种方式虽然可以杜绝用户在input框中输入空格，但是无法显示用户通过鼠标点击粘贴，粘贴到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失焦之后才会执行） function myFunction(){ var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } 以上几种方式虽然可以杜绝用户在input框中输入空格，但是无法显示用户通过鼠标点击粘贴，粘贴到input中的空格 $(document).find("input").on("input",function(e){ this.value=this.value.replace(/\s/g, "") })通过input的input事件，可以进行代码的实时监控，主要input 的值一发生改变就可以检测到，所以不仅杜绝了用户通过键盘来输入的空格，还禁用掉了通过鼠标粘贴进去的空格！ |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |