Двойные символы вставляются в мое поле ввода при обработке события нажатия клавиши

Question

Я пытаюсь обновить свой value Атрибут в input Элемент типа text посредством ввода. Но я получил двойные символы в тексте input при первом нажатии клавиши , Зачем? Заранее спасибо

HTML-код

<input type="text" name="" value="" id="click">

код javaScript

const input= document.getElementById('click');
var char= '';
input.addEventListener('keypress',function(e){
    var x= e.which || e.keyCode;
    char+= String.fromCharCode(x);
    input.setAttribute('value',char);
});

const input= document.getElementById('click');
var char= '';
input.addEventListener('keypress',function(e){
    var x= e.which || e.keyCode;
    char+= String.fromCharCode(x);
    input.setAttribute('value',char);
});

<input type="text" name="" value="" id="click">

Answer 1

keypress вызывает это, чтобы это произошло.Он стреляет после того, как персонаж уже был добавлен в поле ввода.Вы можете исправить это, используя e.preventDefault()

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

const input= document.getElementById('click');
var char= '';
input.addEventListener('keypress',function(e){
    e.preventDefault();
    var x= e.which || e.keyCode;
    char += String.fromCharCode(x);
    input.setAttribute('value',char);
    
});

<input type="text" name="" value="" id="click">

В качестве альтернативы и более предпочтительно, вы можете использовать новый input прослушиватель событий, который сразу запускается на входе блока:

const input= document.getElementById('click');
var char= '';
input.addEventListener('input',function(e){
    var x= e.which || e.keyCode;
    char += String.fromCharCode(x);
    input.setAttribute('value',char);
    
});

<input type="text" name="" value="" id="click">