解决vue格式银行卡(信用卡)每四位数字用一个符号分隔的问题

问题

制作银行卡输入框时有这样的需求问题。这里，例如，使用分区

调查

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

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

上面的显示框无法修改，四位数分区的格式清晰可见。

然而，为了实现我们项目中只有一个卡号输入框的要求，我们必须非常小心地研究它。

解决

只需稍加修改，将下面的方法绑定到输入框的输入法。

更改：获取自己输入的dom，并在赋值时为自己的数据赋值。

//格式化卡号显示，每4位数字加-格式化卡号(card num){//得到输入的dom对象，因为这里使用的是元素ui的输入。因此，您需要获取常量输入=这个。$ refs . cardinput . $ El . getelementsbytagname(' input ')[0]//获取当前光标位置const cursorindex=input.selectionstart//在字符串中，光标前的-号为const line numforleft=(card num。切片(0，cursorindex)。匹配(///g)| |[])。length//带全删除constnoline=cardnum的字符串。替换(///g)，//删除格式错误的字符，并重新插入字符串const new cardnum=noline。替换(/\ d/g ' ')。替换(/(\ d {4})/g，' $1-')。替换(/-$/，)//在修改后的字符串const new ineumofcursorleft=(newcard num)中原始光标前的-号。切片(0，Cursorindex)。匹配(///g)| |[])。length//光标应该在修改后的字符串中的位置。const new cursorindex=cursorindex new linenumofcursorleft-line numofcursorleft//分配一个新值。NextTick保证-不能手动输入或删除，但这。$ nexttick (()={this。card form . credit card=new card num//可以根据规则自动填写以更正光标位置。NextTick确保光标在呈现新值后被定位。$ Nexttick (()={//SelectionStart和selectionEnd分别代表选择一段文本时的开始和结束位置。输入。选择开始=新光标索引输入。SelectionEnd=NewCursorIndex})})

这里没有封装，但是可以自行设计，例如：格式化银行卡(DOM、数据名、cardnum、breaker)

ps:

1.在这种方法中，如果要删除中间的分隔符，光标会向前移动一位(应该算是正常逻辑)。

2.这里使用了元素ui，并且对输入进行了长度限制。在这里，我们不会重复太多的长度，而是自己处理。

3.这个垫片是。我相信每个人都需要更换垫片。只需将方法中的-at五个位置改为自己的符号，并注意转义(如空格：change-to \s)

让我们看看是否有*。崇高中的vue文件格式化插件

HTML/CSS/JS美化就可以了。安装后，工具-html/CSS/jspretify-设置美化首选项

将vue添加到' allowed _ file _ extensions ' :[' html '，' html '，' XHTML '，' shtml '，' XML '，' SVG '，' vue']

摘要

以上就是vue格式银行卡(信用卡)每四位数字分开的解决方案，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！