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

(0)

相关推荐

  • 详解如何在vue项目中使用eslint+prettier格式化代码

    对于前端代码风格这个问题一直是经久不衰,每个人都有自己的代码风格,每次看到别人代码一团糟时候我们都会吐槽下.今天给大家介绍如何使用eslint+prettier统一代码风格. 对于eslint大家应该比较了解了,是用来校验代码规范的.给大家介绍下prettier,prettier是用来统一代码风格,格式化代码的,支持js.ts.css.less.scss.json.jsx.并且集成了vscode.vim.webstorm.sublime text插件. 如果你的项目中采用的是ellint默认规则

  • vue 表单输入格式化中文输入法异常问题

    v-model 是 vue.js 提供的语法糖,根据不同的表单控件监听不同的事件,实现对表单控件的数据双向绑定. 当控件是 <input> 输入框时,v-model 监听其 input 事件. 如下所示,这两种写法有什么区别吗? <input :value="name" @input="name = $event.target.value"><input v-model="name"> 输入中文格式化问题 表单

  • vue时间格式化实例代码

    整理文档,搜刮出一个vue时间格式化实例代码,稍微整理精简一下做下分享. export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h

  • vue.js实现价格格式化的方法

    这里分享一个常用的价格格式化的一个方法,在电商的价格处理中非常的实用,我们可以看一个效果 这里在价格数据的地方使用了一个过滤器,通过这个过滤器对价格做了保留小数位的处理. HTML <div class="price"> <span v-html="goods.sale_price|format"></span> <span class="price-before">¥{{"这里是价格数据"}}&l

  • Vue filter格式化时间戳时间成标准日期格式的方法

    调用实例:yyyy-MM-dd或者yyyy-MM-dd hh:mm:ss进行格式 <div>{{data | dataFormat('yyyy-MM-dd hh:mm:ss')}}</div> 代码: import Vue from 'vue' Vue.filter('dataFormat', function (value, fmt) { let getDate = new Date(value); let o = { 'M+': getDate.getMonth() + 1,

  • Vue-cli Eslint在vscode里代码自动格式化的方法

    编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等. 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持. 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则: { "vetur.format.defaultFormatter": { "html": "prettier", "css": "prettier&qu

  • Vue自定义过滤器格式化数字三位加一逗号实现代码

    前端处理一些金额,数字类的数据要求按照固定的格式显示,比如9,527,025,或者带有小数(如1,587.23)仍要三位一断.有些话也不必多说,既然要求如此,实现呗. 作为前端主流框架之一的Vue,类似的功能肯定都有人写的很完善了.我呢,最讨厌不动脑筋去网上找现成的,所以我自己写了一个.话不多说,先放效果图再贴代码(为了展现思路,我面向过程写的,另外这个是针对保留两位小数的数字进行过滤,因为保留整数的太简单了). <!DOCTYPE html> <html> <head>

  • vue中格式化时间过滤器代码实例

    本文实例为大家分享了vue格式化时间过滤器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue"></script> <

  • vue.js实现格式化时间并每秒更新显示功能示例

    本文实例讲述了vue.js实现格式化时间并每秒更新显示功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=

  • 详解vue2.0的Element UI的表格table列时间戳格式化

    这两天学习了vue2.0的Element UI的表格table列时间戳格式化,所以,今天添加一点小笔记. 表格属性 <el-table :data="tableData" v-loading.body="loading" border @selection-change="selectionChange" style="width: 100%"> <el-table-column prop="cre

随机推荐