输入银行卡号，每四位一个空格，且光标自动定位

最新推荐文章于 2024-05-21 23:21:19 发布

世林_不调皮了

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量127

点赞数 4

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_55891422/article/details/136683047

版权

jquery版本

<input type="text" id="bankCardNumber">

        // 银行卡号输入
        $('#bankCardNumber').on('input', function (e) {
            e.preventDefault();
            let oldSelectionStart = document.querySelector('#bankCardNumber').selectionStart
            let value = addNbspTo4(e.target.value.trim())
            $(this).val(value);
            // 判断光标位置
            let newSelectionStart = oldSelectionStart
            if (value[oldSelectionStart - 1] == ' ' && e.originalEvent.data !== null) {
                newSelectionStart += 1
            }
            if (value[oldSelectionStart - 1] == ' ' && e.originalEvent.data === null) {
                newSelectionStart -= 1
            }
            document.querySelector('#bankCardNumber').setSelectionRange(newSelectionStart, newSelectionStart)
        })

        // 银行卡号四位加一个空格
        function addNbspTo4(num) {
            const formattedStr = num.replace(/\s+/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
            return formattedStr
        }

vue版本

                // 银行卡号四位一组
                banknumberInput(e) {
                    e.preventDefault();
                    let oldSelectionStart = document.querySelector('#bankCardNumber').selectionStart
                    let value = this.addNbspTo4(this.banknumber)
                    this.banknumber = value
                    // 判断光标位置
                    let newSelectionStart = oldSelectionStart
                    if (value[oldSelectionStart - 1] == ' ' && e.data !== null) {
                        newSelectionStart += 1
                    }
                    if (value[oldSelectionStart - 1] == ' ' && e.data === null) {
                        newSelectionStart -= 1
                    }
                    this.$nextTick(() => {
             
document.querySelector('#bankCardNumber').setSelectionRange(newSelectionStart,
                            newSelectionStart)
                    })
                },
                // 四位一个空格
                addNbspTo4(num) {
                    const formattedStr = num.replace(/\s+/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
                    return formattedStr
                }