js теряет символы, если набирается слишком быстро

Question

Хорошо, я закончил работу и удалил упоминание о некоторых проблемах, которые мне пришлось решить, чтобы облегчить чтение.

Я запутываю символы, введенные в текстовое поле (id = ' user_pin_code ') так, чтобы они выглядели как' * 'или' **** 'в зависимости от количества символов. Это для ввода ПИН-кода.

Первая часть берет введенные символы и заменяет их на звездочку «*». Таким образом, PIN-код из 6 символов покажет '******' Пока все хорошо, независимо от того, как быстро я набираю.

Следующая часть берет фактически введенные символы и заполняет другое текстовое поле (id = 'PINcode ') с собственно введенными символами. Проблема в том, что если я печатаю быстро, некоторые из них упускаются. поэтому 'wxymdo' можно ввести как 'wxmd'.

<script>
$(document).ready(function(e) {

var actualTextEntered = ""; 


    $("#user_pin_code").keyup(function(e) {
                       
        var x = document.getElementById("user_pin_code").value;
                
        actualTextEntered += x.replace(/\\*/g,"");
                
        addEventListener('keydown', function(event) {
            const key = event.key; // const {key} = event; ES6+
            if ( key === "Backspace" ) {
                // Do something
                actualTextEntered = ''; 
                x='';
            }
        });
        
        
        
        document.getElementById("user_pin_code").value = "";
        
        for (var i=0;i<actualTextEntered.length;i++)
        {   
        document.getElementById("user_pin_code").value += "*";
        document.getElementById("PINcode").value = actualTextEntered;
        }   
        
        
    });

});

Answer 1

Проблема только в том, как работает событие keyup, оно, как правило, не может захватывать очень быстрые вводы. Как и в случае с onmousemove, когда мышь движется очень быстро, некоторые элементы будут пропущены.

Почему бы не использовать input type = "password", или я думаю, что использование события oninput может помочь вам.