vue表单验证之禁止input输入框输入空格


Posted in Vue.js onDecember 03, 2020

测试小姐姐让输入框不允许输入空格,安排。 

刚开始用的下面这个方法,因为我是电脑端f12的情况下调试移动端,所以下面这个方法可以实现禁止输入空格,于是就打包测试上线了,上线后才发现真机中不支持,应该是pc端和移动端事件不一样,所以如果你是pc端,可以使用下面这个方法。

vue表单验证之禁止input输入框输入空格

input上添加下方代码(我用的vant也一样,包括elemenui等)

@keydown.native="keydown($event)"

methods中写入下方代码

methods:{
  // 禁止输入空格
  keydown(e){
		if(e.keyCode == 32){
			e.returnValue = false
		}
  }
}

最终使用的下面这个方法,移动端和pc端都可以禁止输入空格

vue表单验证之禁止input输入框输入空格

input上添加下方代码(我用的vant也一样)

:onkeyup="visitUserName = visitUserName.replace(/\s+/g,'')"

最后分享一个小知识

使用 v-model.trim 可以实现去除输入框的前后空格,中间内容多个空格会保留一个

v-model.trim="visitUserName"

到此这篇关于vue表单验证之禁止input输入框输入空格的文章就介绍到这了,更多相关vue禁止input输入框输入空格内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vue中activated的用法
Jan 03 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
vue 实现上传组件
May 31 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
对vue生命周期的深入理解
Dec 03 #Vue.js
用vue设计一个日历表
Dec 03 #Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 #Vue.js
如何实现vue的tree组件
Dec 03 #Vue.js
Vue实现图书管理小案例
Dec 03 #Vue.js
Vue router安装及使用方法解析
Dec 02 #Vue.js
vue3.0中setup使用(两种用法)
Dec 02 #Vue.js
You might like
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
php 301转向实现代码
2008/09/18 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
node跨域请求方法小结
2017/08/25 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
Python+django实现文件下载
2016/01/17 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
游戏商店:Eneba
2020/04/25 全球购物
同学聚会欢迎辞
2014/01/14 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS