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 相关文章推荐
vue+iview分页组件的封装
Nov 17 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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
ZF等常用php框架中存在的问题
2008/01/10 PHP
php 正则匹配函数体
2009/08/25 PHP
php实现天干地支计算器示例
2014/03/14 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
React组件refs的使用详解
2018/02/09 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
一行python实现树形结构的方法
2019/08/09 Python
Python实现验证码识别
2020/06/15 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
广州盈通面试题
2015/12/05 面试题
销售人员中英文自荐信
2013/09/22 职场文书
信息工程学院毕业生推荐信
2013/11/05 职场文书
办公室内勤工作职责
2013/12/11 职场文书
社区护士演讲稿
2014/08/27 职场文书
2014年度党员自我评议
2014/09/13 职场文书
北京故宫的导游词
2015/01/31 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
用python画城市轮播地图
2021/05/28 Python
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python