Question

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

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

首先，我已经添加到React的输入onChange事件函数，该函数测试输入是否仅包含数字。如果是这样，onChange将执行Formik的handleChange方法。因此，现在我们确定输入的值仅包含字母。

问题与数据格式化有关。我为输入值分配了一个函数，该函数返回格式化的数据。所以现在，我有了44444值，而不是输入的value属性中的4444 4。

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

我也没有其他解决方案。这是我想到的最好的。

Answer 1

希望此示例对您有帮助

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/>

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

1 个答案: