问题

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

调查

查看了很多大公司网站的银行卡输入,发现还有有很多缺陷的:

有的是在中间删除,光标会跳到最后;

有的是能删除掉中间隔断符的;

等等,逻辑感觉比较混乱,或者是我不懂他们的高深设计吧。

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



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

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

解决

将下面的方法稍作修改绑在输入框的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

    如有不足,请留言斧正,十分感谢!

vue 格式化银行卡(信用卡)每4位一个符号隔断的更多相关文章

  1. php实现数字格式化,数字每三位加逗号的功能函数

    原地址:http://www.jb51.net/article/73781.htm php实现数字格式化,数字每三位加逗号的功能函数,具体代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 ...

  2. js jq 手机号实现(344) 附带删除功能 jq 实现银行卡没四个数加一个空格 附带删除功能

    js 手机号实现(344)  下面有将正则验证去掉“-” 或“空格”  下一篇博客有单独的删除功能方法 <!DOCTYPE html> <head> <meta char ...

  3. vscode vue 格式化 ESLint 检查 单引号 双引号 函数括号报错问题

    vscode vue 格式化 最近重新搞了下电脑,重装了 vscode 软件,在用 vue 写项目的时候,照例开启了 ESLint 语法检查,但是发现在使用 vscode 格式化快捷键的时候(shif ...

  4. 申请Payoneer美国万事达信用卡,可获得一个美国虚拟银行账户,立即注册可得25美元

    申请Payoneer美国万事达信用卡,可获得一个美国虚拟银行账户,可以在国内任意一个支持万事达的ATM.POS机上取现和刷卡消费.Payoneer可以网上购物,购买国外的产品,对我们有一个好处就是利用 ...

  5. Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

  6. 创建Vue.js对象:我的第一个Vue.js输出信息

    <!DOCTYPE html><html><head><meta charset=”utf-8″><title>Vue第一条信息</t ...

  7. Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

  8. 浮点数在计算机内存中的表示(IEEE 754规定1位是符号位,8位是指数,剩下的23位为有效数字)

    本文转载自:阮一峰的博客,http://www.ruanyifeng.com/blog/2010/06/ieee_floating-point_representation.html 张玉彬的博客 h ...

  9. 发现Xilinx Virtex 5 FPGA中单个DSP乘法器只支持17位无符号乘法

    发现Xilinx Virtex 5 FPGA中,单个DSP乘法器只支持17位无符号乘法.如果令18位乘数相乘,结果会与正确的乘积不同.

随机推荐

  1. Tortoisegit图文使用教程

    本文只针对使用Tortoisegit的用户,使用命令行的后面可以不用看了 1.安装Git及Tortoisegit 先上图,首先需要把123按顺序安装了 Git下载地址:https://git-for- ...

  2. EOCS跨链核心技术内幕

    EOCS跨链技术的核心就是ICP模块,ICP即Inter Chain Protocol(跨链交互协议),下面着重介绍ICP工作原理和实现细节. Inter Chain Protocol(ICP) IC ...

  3. Python学习笔记-Django连接SQLSERVER

    Django连接SQLSERVER使用的是odbc驱动. CentOS下安装django-obdc-azure时需安装依懒 yum install gcc yum install gcc-c++ yu ...

  4. python自定义封装logging模块

    #coding:utf-8 import logging class TestLog(object): ''' 封装后的logging ''' def __init__(self , logger = ...

  5. gitlab 随笔

    输入: $ git init $ git add . $ git commit -m 'init commit' 绿色部分为gitlab网页的项目创建后下面的ssh路径,也可以通过查看gitlab网页 ...

  6. 【彻底解决】django migrate (mysql.W002) 【专治强迫症】

    cmd中使用python3 manage.py migrate命令,报warn,很多人都遇到过 解决办法: settings.py文件夹加入DATABASES['OPTIONS']['init_com ...

  7. 【java】Java组件概览(2)— 基本库

    1.Math Math相关的库包括包括浮点库(java.lang.Math和java.lang.StrictMath)和任意精度数学(java.math包). (1)java.lang.Math 该类 ...

  8. linux yum提示Loaded plugins: fastestmirror, security错误的解决方法

    别听网上的,先检查自己是不是打错了.........我就是打错了一个横杆搞了一个多小时 具体: 如图这种,长横杆 修改后结果: 所以在不知情的情况之下千万不要乱改东西,先检查代码是否有误 题外话: = ...

  9. bzoj 5495

    今年省选题... 表示当时还没学可持久化trie,所以打60分暴力走人... 现在学了可持久化字典树,就可以搞一搞了嘛! 首先看到题目描述,很容易想到首先搞出异或前缀和,然后建起可持久化字典树 然后考 ...

  10. java ReentrantLock 公平锁 非公平锁 测试

    package reentrantlock; import java.util.ArrayList; import java.util.concurrent.locks.ReentrantLock; ...