解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题


Posted in Javascript onSeptember 14, 2018

问题

在做银行卡输入框时有一个需求如题,这里举例用-隔断

调查

查看了很多大公司网站的银行卡输入,发现还有有很多缺陷的:
 有的是在中间删除,光标会跳到最后;
 有的是能删除掉中间隔断符的;
 等等,逻辑感觉比较混乱,或者是我不懂他们的高深设计吧。

只有支付宝的设计感觉是比较合理的,改变了只有输入框的固有方案,放图:

解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题

上面出现的显示框不可修改,能清晰看出四位隔断的格式。

不过为了实现自己项目只有一个卡号输入框的需求,只能硬着头皮研究了。

解决

将下面的方法稍作修改绑在输入框的input方法上就ok了。

改动:获取你自己的input的dom、赋值时给你自己的data赋值。

// 格式化卡??示,每4位加-
formatCardNumber (cardNum) {
 // 获取input的dom对象,这里因为用的是element ui的input,所以需要这样拿到
 const input = this.$refs.cardInput.$el.getElementsByTagName('input')[0]
 // 获取当前光标的位置
 const cursorIndex = input.selectionStart
 // 字符串中光标之前-的个数
 const lineNumOfCursorLeft = (cardNum.slice(0, cursorIndex).match(/-/g) || []).length
 // 去掉所有-的字符串
 const noLine = cardNum.replace(/-/g, '')
 // 去除格式不对的字符并重新插入-的字符串
 const newCardNum = noLine.replace(/\D+/g, '').replace(/(\d{4})/g, '$1-').replace(/-$/, '')
 // 改后字符串中原光标之前-的个数
 const newLineNumOfCursorLeft = (newCardNum.slice(0, cursorIndex).match(/-/g) || []).length
 // 光标在改后字符串中应在的位置
 const newCursorIndex = cursorIndex + newLineNumOfCursorLeft - lineNumOfCursorLeft
 // 赋新值,nextTick保证-不能手动输入或删除,只能按照规则自动填入
 this.$nextTick(() => {
  this.cardForm.creditCard = newCardNum
  // 修正光标位置,nextTick保证在渲染新值后定位光标
  this.$nextTick(() => {
   // selectionStart、selectionEnd分别代表选择一段文本时的开头和结尾位置
   input.selectionStart = newCursorIndex
   input.selectionEnd = newCursorIndex
  })
 })
}

这里就不做封装了,可自封,例:formatBankCard(dom, dataName, cardNum, breaker)

ps:

1.此方法如果想在中间删除隔断符,光标会前移一位(应该也算是正常逻辑吧)。

2.这里用的是element ui,长度限制在input上做了,这里不对长度过多赘述,自行处理。

3.这里间隔符是-,相信大家有改变间隔符的需求,只需把方法里五个位置的-改为自己的符号就好了,注意转义(如空格:将-改为\s)

下面看下sublime中有没有*.vue文件格式化插件

HTML/CSS/JS Prettify 这个插件就行, 安装后 tools->HTML/CSS/JS Prettify->set prettify preference

 在"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg","vue"] 加上vue就好了

总结

以上所述是小编给大家介绍的解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
vuex与组件联合使用的方法
May 10 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
工作中常用js功能汇总
Nov 07 Javascript
Javascript 之封装(Package)
Sep 14 #Javascript
微信小程序框架wepy之动态控制类名
Sep 14 #Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 #Javascript
react 国际化的实现代码示例
Sep 14 #Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 #Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 #Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 #Javascript
You might like
php+dbfile开发小型留言本
2006/10/09 PHP
php mssql 时间格式问题
2009/01/13 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
更优雅的事件触发兼容
2011/10/24 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
JavaScript & jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
详解Python中的多线程编程
2015/04/09 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
实例介绍Python中整型
2019/02/11 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
python 19个值得学习的编程技巧
2020/08/15 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
python实现经典排序算法的示例代码
2021/02/07 Python
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
大学班长的职责
2014/01/27 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python
python APScheduler执行定时任务介绍
2022/04/19 Python
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技