解决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 相关文章推荐
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
理解Javascript图片预加载
Feb 23 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 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中inlcude()性能对比详解
2012/09/16 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
php中数组最简单的使用方法
2020/12/27 PHP
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
懒加载实现的分页&&网站footer自适应
2016/12/21 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
django 环境变量配置过程详解
2019/08/06 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
九年级物理教学反思
2014/01/29 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
银行奉献演讲稿
2014/09/16 职场文书
就业协议书范本
2014/10/08 职场文书
地雷战观后感
2015/06/09 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书