Stack Exchange
Double chars are inserted in my input field when handling keypress event
I am trying to update my value Attribute in input Element of type text through typing.But I got double chars in the input text the first time I press a key. Why?
html code
<input type="text" name="" value="" id="click">

JavaScript code
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">




keypress is causing this to happen. It's firing after the character has already been initially added to the input box. You can fix this by using e.preventDefault()
Note this will have a strange affect on the cursor since it's not being set to after the current character any longer and you're simply appending data to the input box. The cursor will remain static.


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



Alternatively and more preferably, you can use the new input event listener, which fires immediately on box 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">




But when you insert a new character in the input text.it ends this character will be inserted at the end of the text field. not at the position you want

@AhmedRamadan I'm sorry, I'm not understanding.

the first code snippet works but try to add another character in the text field
ex: type "hello"
then try to add a character between "e" and "l". you got this character at the end of hello not at the position you want. hope I declared this issue good. sorry my English is not so good

In other words, Ahmed, you want to insert the character at the position of the cursor, not at the end of the input field, correct?

But if you want the normal operation, then you don't need to handle the event at all. Unless you want to do anything else. But in that case, do the other thing but do not insert the character yourself. Would that work?

@MaartenBodewes what I really want is to store the input text from the user to use it again. and update something in the DOM with this new text. so I come with this idea to store it in value Attribute.Is there a better approach?

I would agree with @MaartenBodewes - if you want the box to act like a normal box you don't need to change it. You can do things with the data without having to try to duplicate the box's normal functions.

@AhmedRamadan Store it anywhere else but in the value attribute of the input box?

@MaartenBodewes mybad yes seems not so good to store data in DOM. I think I could use char directly to update what I want in the DOM.

@zfrisch If you could include some of my last comments in your answer then we could clean up this mess and Ahmed could accept the answer :)
