时间戳

首页 > 解决方案 > 如何通过输入应用信用卡格式？

javascript - 如何通过输入应用信用卡格式？

问题描述

在我的 React 组件中，我有输入，人们应该在其中输入他们的信用卡号。我想应用特殊的信用卡格式，即每 4 个数字之间的空格（如 4444 4444 4444 4444 等）。我想在打字时直接并立即输入这种格式。

重要的是，我想阻止键入（和粘贴、拖动和任何其他输入更改的可能性）除数字以外的任何其他字符的可能性。

首先，我添加了 React 的 input onChange 事件函数，它测试输入是否只包含数字。如果是这样，onChange 会执行 Formik 的 handleChange 方法。所以现在我们确定输入的值只包含字母。

问题来自数据格式。我已经为输入值分配了一个函数，该函数返回格式化的数据。所以现在， 44444我得到了价值，而不是输入的 value 属性4444 4。

进行此更改后，我无法键入任何其他字符，因为4444 4值（最后一个字符之间有空格）未通过仅包含字母的测试。

我也没有使用任何其他解决方案。这是我想到的最好的一个。

标签： javascriptreactjsvalidationinputformik

解决方案

希望这个例子对你有帮助

Array.prototype.forEach.call(document.body.querySelectorAll("*[data-mask]"), applyDataMask);

function applyDataMask(field) {
    var mask = field.dataset.mask.split('');
    
    // For now, this just strips everything that's not a number
    function stripMask(maskedData) {
        function isDigit(char) {
            return /\d/.test(char);
        }
        return maskedData.split('').filter(isDigit);
    }
    
    // Replace `_` characters with characters from `data`
    function applyMask(data) {
        return mask.map(function(char) {
            if (char != '_') return char;
            if (data.length == 0) return char;
            return data.shift();
        }).join('')
    }
    
    function reapplyMask(data) {
        return applyMask(stripMask(data));
    }
    
    function changed() {   
        var oldStart = field.selectionStart;
        var oldEnd = field.selectionEnd;
        
        field.value = reapplyMask(field.value);
        
        field.selectionStart = oldStart;
        field.selectionEnd = oldEnd;
    }
    
    field.addEventListener('click', changed)
    field.addEventListener('keyup', changed)
}
Credit Card: <input type="text" value="____ ____ ____" data-mask="____ ____ ____"/><br/>

推荐阅读