Reading input from user but not displaying it in the text field - HTML, JavaScript

Question

I am currently working on a encoder. I basically have a textarea which accepts the string. When a letter is displayed using the document.onkeydown(event.keycode) I record the keystrokes and display it back on the same field. The problem arises after the onkeydown() finishes, the encrypted letter displays on the TextArea followed by the original letter.

I tried deleting the last added letter using splice or substring functions but for a fraction of a second you can see the letter or if you hold a key you can see the actual letter. So how do I hide the original input?

Is there is something similar in javascript like C's getch() where a key is pressed and no output is shown?

Thanks in advance.

Answer 1

The function you're looking for is preventDefault() .

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

So inside your event handler, you would call preventDefault on the event parameter. This prevents any default behavior from occurring, and lets you defined it yourself. In your case, this would prevent the letter pressed from being added to the input field.

For example:

function onClick(e) {
    e.preventDefault();
    //your code here
}