React ввод и вывод номера карты

Question

Мне нужно на ReactJS при помощи input сделать что бы при вводе, и последующем выводе на экран по нужному паттерну.

То есть, при вводе нужно чтобы после каждого 4го символа ставился пробел:

1234 5678 9012 3456

и при выводе одновременно с вводом выводилось этот же номер с таким же паттерном, то есть с пробелами.

const [cardNumber, setCardNumber] = useState("0000 0000 0000 0000");

<input 
    type="number"
    className="card-number-input"
    onChange={(e) => setCardNum(e.target.value.toString().replace(/\d{4}(?=.)/g, '$& '))}
    maxLength={16} 
/>

<p>{cardNumber}</p>

В onChange решается вопрос вывода, однако ввод по паттерну не проводится

Answer 1

на javascript когда то делал вот такие маски

для денег
для карты

let input = document.getElementsByClassName("numberCart");

console.log(input.length);

    for (var i = 0; i < input.length; i++) {
    
        input[i].addEventListener("keyup", (e) => { formatCart(e.target); });
        input[i].addEventListener("keypress", (e) => { formatCart(e.target); });
        
    }
    function formatCart(input) {
        var input_val = input.value;
        if (input_val === "") { return; }
        var original_len = input_val.length;
        var caret_pos = input.selectionStart;
        input_val = input_val.replace(/\D/g, "").replace(/\B(?=(\d{4})+(?!\d))/g, " ");
        input.value = input_val;
        var updated_len = input_val.length;
        caret_pos = updated_len - original_len + caret_pos;
        input.setSelectionRange(caret_pos, caret_pos);
    }

возможно взять за основу при вводе пробел устанавливался автоматически

БЛОГ НА HUSL

React ввод и вывод номера карты

Ответы (1 шт):