伏龙阁资源网

解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
站长资源 2024/11/27 佚名
2 0

问题

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

调查

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

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

解决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位一个符号隔断的问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接