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 组件注册
Nov 20 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
Vue router配置与使用分析讲解
Dec 24 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 array_slice函数的使用以及参数详解
2008/08/30 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
jquery延迟加载外部js实现代码
2013/01/11 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Django框架中的对象列表视图使用示例
2015/07/21 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
python实现按首字母分类查找功能
2019/10/31 Python
python 实现矩阵按对角线打印
2019/11/29 Python
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
管理失职检讨书
2014/02/12 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
公司转让协议书
2016/03/19 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
详解Redis复制原理
2021/06/04 Redis
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
mysql创建存储过程及函数详解
2021/12/04 MySQL
python井字棋游戏实现人机对战
2022/04/28 Python
python内置模块之上下文管理contextlib
2022/06/14 Python