why setting input.value equal to empty string doesn't remove recently pressed key?
why setting input.value equal to empty string doesn't remove recently pressed key?
In below code if I press 'a' after some keys it should remove everything from input including but 'a' is not going away in below code.
const input = document.querySelector("input");
function type(e)
if (e.key === "a")
console.log("helo");
input.value = "";
window.addEventListener("keydown", type);
2 Answers
2
The problem that you are having is that the keydown event fires before the character is added to the input. To resolve this, you must use the keyup event.
keydown
keyup
var input = document.getElementById("exampleInput");
function type(e)
if (e.key === "a")
console.log("helo");
input.value = "";
window.addEventListener("keyup", type);
<input type="text" id="exampleInput" />
keydown
Do no edit code in question! Making it a live snippet may be a good thing, but changing it entirely is definitely not.
– Kaiido
Aug 30 at 5:23
@Kaiido Yeah, that edit was unintentional. You'll see I already submitted a correction prior to you editing it yourself.
– Adam Chubbuck
Aug 30 at 5:24
Alright, be more cautious the first time next time. Also, listening to keyup might not be the best. E.g we can fool your script by pressing Shift key after pressing "a" and before releasing it. Indeed, in this case, while the keydown and input events were "a", the keyup is now "A".
– Kaiido
Aug 30 at 5:27
@Kaiido That is correct. Ideally, you would listen for the change event, check the last character for the input value, then see if that value is equal to "a". If so, clear the input and write to the console, as the OP intends.
– Adam Chubbuck
Aug 30 at 5:34
The handler fires before the default action of the keydown fires. This is why you can use event.preventDefault() on key events - the handlers fire before the default action occurs, which is why the default actions are cancelable with preventDefault().
keydown
event.preventDefault()
preventDefault()
So, for what you're trying to do, clear the value and call preventDefault():
preventDefault()
const input = document.querySelector('input');
window.addEventListener("keydown", type);
function type(e)
if (e.key === "a")
console.log("clearing");
input.value = "";
e.preventDefault();
<input>
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
I can't see any
keydownused in the question!!! It is basically the same code between the question and answer!– Mamun
Aug 30 at 4:25