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中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
php读取javascript设置的cookies的代码
2010/04/12 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python的另外几种语言实现
2015/01/29 Python
Python多线程实现同步的四种方式
2017/05/02 Python
Python KMeans聚类问题分析
2018/02/23 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
Ibatis如何调用存储过程
2015/05/15 面试题
阿尔卡特(中国)的面试题目
2014/08/20 面试题
物控部经理职务说明书
2014/02/25 职场文书
教师一帮一活动总结
2014/07/08 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书