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

【问题标题】：How to apply credit card formatting with input?如何通过输入应用信用卡格式？
【发布时间】：2019-07-16 08:08:19
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

最简单的方法是在提交时检查格式并使用示例格式显示错误
使用掩码而不是提供实际空格

标签： javascript reactjs validation input formik

【解决方案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: &lt;input type="text" value="____ ____ ____" data-mask="____ ____ ____"/&gt;&lt;br/&gt;

【讨论】：

【解决方案2】：

我创建了一个package，它公开了一个输入组件，该组件根据它接收到的掩码显示一个掩码值。

将光标保持在正确位置时，掩码会发生变化（即使您在输入的中间更改了部分值，粘贴了一些字符，或者删除了其中的一部分，即使掩码发生了变化）。

您可以在以下位置查看带有示例的演示：

https://lucasbasquerotto.github.io/react-masked-input

您可以在第一个示例中看到类似于信用卡的掩码，而您收到的值没有掩码（仅显示值）。只需将掩码更改为 9999 9999 9999 9999 即可。

安装包：npm i react-hook-mask

使用它：

import { MaskedInput, createDefaultMaskGenerator } from 'react-hook-mask';

const maskGenerator = createDefaultMaskGenerator('9999 9999 9999 9999');

const CreditCardMaskedInput = () => {
    const [value, setValue] = React.useState('');

    return (
        <MaskedInput
            maskGenerator={maskGenerator}
            value={value}
            onChange={setValue}
        />
    );
};

这个组件包装了一个默认的input，但是这个包也暴露了hooks，让你可以将它与任何类型的组件一起使用。

函数createDefaultMaskGenerator 总是返回一个静态字符串掩码。也可以使用dynamic masks，根据值变化，甚至对值进行变换（比如把字符变成大写）。

如果以后您想根据值更改信用卡掩码，您可以使用动态掩码（因为某些信用卡有不同的掩码）。

我根据您的要求创建了一个带有示例的演示（它使用掩码9999 9999 9999 9999）：

https://codesandbox.io/s/credit-card-mask-8f3w8?file=/src/index.js

【讨论】：