基于VUE比较完美实现银行卡号输入框自动间隔

偏执的太偏执、 2024-02-05 15:12 14阅读 0赞

### 基于VUE比较完美实现银行卡号输入框自动间隔 ###

*注：* 实现效果与MandUI的实现效果，可以说是一模一样。实现方式比MandUI的简单不少。

**主要思路：**

1.  正则表达式替换
2.  快慢指针区分增删操作
3.  重置光标位置

直接上实现代码：

data(){
        
    	carNo:'',//双向绑定的值
    	lastLength:0,//慢指针
    	curLength:,	//快指针
    },
    methods:{
        
    	//绑定方法，@input
    	inputCardNo(){
        
    		let dom = document.getElementById('cardNo')
    		let start = dom.selectionStart	//输入框光标开始位置
    		let end = dom.selectionEnd	//输入框光标结束位置
    		this.curLength = this.cardNo.length //更新快指针，快指针先跑
    		//正则表达式处理卡号格式化
    		this.cardNo = this.cardNo.replace(/\D/g,"").replace(/(.{4})(?=\d)/g,"$1 ")
    		//快慢指针判断增、删操作，并处理替换字符后，光标移至末尾的问题
    		if(this.lastLength < this.curLength){
        
    			//新增字符时
    			this.$nextTick(()=>{
        
    				dom.setSelectionRange(start+1,end+1)
    			})
    		}else{
        
    			//删除字符时
    			this.$nextTick(()=>{
        
    				dom.setSelectionRange(start,end)
    			})
    		}
    		this.lastLength = this.curLength	//更新慢指针
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关基于Python实现银行卡识别

在本文中将介绍如何使用Python和深度学习技术来实现银行卡识别功能。银行卡识别是一个在金融、安全等领域具有重要应用的问题，将使用深度学习模型来实现银行卡图像的识别和分类。

Love The Way You Lie/ 2024年04月22日 15:25/ 0 赞/ 69 阅读

相关基于VUE比较完美实现银行卡号输入框自动间隔

基于VUE比较完美实现银行卡号输入框自动间隔注：实现效果与MandUI的实现效果，可以说是一模一样。实现方式比MandUI的简单不少。主要思路： 1. 正则表

偏执的太偏执、/ 2024年02月05日 15:12/ 0 赞/ 15 阅读

相关前端实现根据银行卡号得到所属银行以及银行logo

根据银行卡号得到所属银行以及银行logo 银行logo下载地址链接：https://share.weiyun.com/5VxcV92 密码：8twbwh

电玩女神/ 2023年06月22日 09:27/ 0 赞/ 21 阅读

相关银行卡号输入框四位一格

/ 类描述：银行卡号输入框四位一格<br/> / class BankNumberEditText : CleanEditText {

た入场券/ 2023年02月19日 08:23/ 0 赞/ 11 阅读

相关通过银行卡号查询银行卡信息

一、阿里（支付宝）银行卡验证接口（良心接口，无需注册直接调用） 1. 银行卡信息接口接口api：https://ccdcapi.alipay.com/valida

落日映苍穹つ/ 2022年12月27日 09:20/ 0 赞/ 470 阅读

相关根据银行卡号判断所属银行

public class BankUtil { //传入卡号得到银行名称 public static String getNameOf

淡淡的烟草味﹌/ 2022年11月29日 03:19/ 0 赞/ 529 阅读

相关输入银行卡号，可以自动识别到银行卡类型的方法

下载依赖：npm install bankcardinfo 使用方法： 1: var BIN = require(‘bankcardinfo’); 2：调用:两个参

分手后的思念是犯贱/ 2022年11月11日 05:29/ 0 赞/ 309 阅读

相关根据银行卡号查询银行卡名称

package com.common.util; public class BankUtil { // 传入卡号得到银行名称 p

系统管理员/ 2022年06月18日 05:08/ 0 赞/ 1128 阅读

相关获取银行卡所属银行，验证银行卡号是否正确

转载地址：[http://blog.csdn.net/yqwang75457/article/details/72627542][http_blog.csdn.net_yqwa

小鱼儿/ 2022年05月31日 04:00/ 0 赞/ 426 阅读

相关手机号，银行卡号等自动分组显示的输入框

> 代码地址如下： > [http://www.demodashi.com/demo/14752.html][http_www.demodashi.com_demo_147

短命女/ 2022年03月10日 14:18/ 0 赞/ 228 阅读