如何使用JavaScript对账户名和Sort Code进行格式化？

云上老周

2026-7-31

银行卡排序码输入格式化方案及需求

我先贴出自己目前的解决方案，但还不确定是否最优，希望能得到其他实现思路。

现有方案特性

自动在正确位置添加短横线，用户仅需输入数字即可
支持任意长度，可通过设置input的maxlength属性控制，默认最大长度为8个字符
允许用户删除数字时无需同时删除短横线

发帖缘由

我在StackOverflow上没找到合适的答案，谷歌搜索结果大多是StackOverflow上的PHP实现，相关的JavaScript方案很难找到。希望这个问题能催生更多解决方案！

现有方案工作原理

该方案针对实时输入场景设计：

先确定输入框的最大长度
捕获键盘事件，判断是否按下删除键（Backspace）
通过正则表达式，将每第2个字符替换为自身加短横线
先移除所有非数字字符，再用正则插入短横线，最后截取字符串去除末尾多余的短横线

需要将此函数绑定到input的onkeyup或onpaste事件，传入this参数。

代码示例

JavaScript

function checkSortCode(el,ev){
    var len = el.maxLength || 8;
    ev = ev || window.event;
    if(ev.keyCode == 8 && el.value.slice(-1) == "-"){
        el.value = el.value.slice(0,-1);
    } else {
        var regex = new RegExp("(\\S{" + (2 - 1) + "}\\S)", "g");
        el.value = el.value.replace(/[^0-9]/g,"").replace(regex,("$1"+"-")).slice(0,len);
    }
}

CSS

.sortcode::placeholder{color:#eeeeee;}
body{font-family:arial,sans-serif;font-size:1.4em;}
input{font-size:1.4em;}

HTML

<label>Sort Code</label><br>
<input type="text" name="sortcode" onkeyup="checkSortCode(this,event)" onpaste="checkSortCode(this,event)" class="sortcode" size="8" maxlength="8" placeholder="00-00-00" />