I understand that in Javascript, the 'keypress' event fires when a character gets inserted into the screen and the 'input' event fires when the input field of yours changes. I've seen many good explanations of the different types of events like here, but I was more wondering about the difference between those two events since they seem so similar. Specifically:
What, if at all, is the difference between keypress and input events? In my quick testing, it seems like keypress happens first, but is that it?
Under what circumstances would I use one over the other?
So actually those two events are not the same at all. Let me break it down for you.
keypress event triggers when any of your keyboard keys are pressed independently of the element you are focusing. If you press a key on a blank html page, the event will be triggered. This event is mostly used to trigger events like when there is a popup and you press escape, it hides it.
input event is specific to the case where you are currently typing or pressing keys while focusing an input element. With it, you can actually get the input value and do stuff with it like in a form, check if the password has symbols, a caps letter, and numbers.
This is the difference between those two events. They don't have the same use at all.
To answer your question about when you would use keyDown or keyUp versus input:
Navigation controls for games
Keys that don't change the text. For instance, using keyDown to detect 'esc' or 'F1' pressed. I commonly use keyDown detection of 'esc' to close popup windows
Related
Can anybody please explain me the exact difference between input, keyup, keypress and afterkeydown events parameters for the value binding in knockoutJS ?I'm confused from reading about these from link, quoting the same below:
If your value binding also includes a parameter called valueUpdate, this defines additional browser events KO should use to detect changes besides the change event. The following string values are the most commonly useful choices:
input - updates your view model when the value of an or element changes. Note that this event is only raised by reasonably modern browsers (e.g., IE 9+).
keyup - updates your view model when the user releases a key
keypress - updates your view model when the user has typed a key. Unlike keyup, this updates repeatedly while the user holds a key down
afterkeydown - updates your view model as soon as the user begins typing a character. This works by catching the browser’s keydown event and handling the event asynchronously. This does not work in some mobile browsers.
Correct me if, I'm wrong the input event is happens once the user is finished typing the text in the textbox and the cursor is not still in the textbox. The keypress event is used to detect cases when the key is pressed for a long time, the event is fired and the characters are recorded proportional to the time of pressing.The keypress is high level event as compared to keyup and keydown.
The definitions of keypup and afterkeydown are what I find confusing and want to know particular use cases of these two, in context to valueUpdate binding.
I'm creating a basic search app and on keypress in the search input textbox I want to go back to the server to get results for a javascript autosuggestion dropdown. Is there any value to adding event handlers for both keyup and keydown? It seems like the keydown seems to work fine. Also, I noticed there is a keypress event as well. Should I be using that instead?
There is no need for a simple search input to fire events every keyup and keydown. This would not be very efficient, you also would be making a bunch of unnecessary calls to the server. I would definitely suggest using one or the other. I prefer keyup so that the user may finish typing there letter before the event is fired. So if you are not using the others for a specific reason use KEYUP for a search input.
I know it's a weird question, but is possible to determinate (using PHP/JavaScrip) the device's source of the 'check action'? I need to find out when a user click on a checkbox option, which device he/she used to do the actual click.
I hope I made sense here.
With Javascript, this is easy. You can attach click and keydown events to the checkbox (onclick, onkeydown, or use jQuery if you want) and they will be triggered on click or keydown. By "click" with the keyboard I assume you mean highlighting the checkbox via tabbing and pressing space. This will still trigger the keydown event, but not the click.
I'm not asking this because I need a work-a-around. I have one that works fine, but I want to know WHY it doesn't. Is this bug in Javascript (or JQuery because I was using the JQuery .keypress handler) or is there a specific reason why this is so?
The keypress event is designed for handling a character typed by the user rather than detecting keyboard activity and the delete and backspace keys do not generate characters. Some browsers blur this line somewhat but the general principle is that the keyup and keydown events are there to detect any key being pressed and telling you about which key it is while keypress is for detecting an actual character being typed.
The short answer is that the onkeypress event is not fired for all key types in all browsers. Check the manual for your browser.
Why?
Probably not a comprehensive answer, but consider Shift, when it goes down and when it comes up relative to other keys is significant. And different keyboard hardware has different key rollover characteristics which you might want to know about in detail.
A total newbie question, so please bear with me here ;)
When a key press occurs in a HTML text input control, there are two events that seem useful in managing it (onKeyPress and onChanged). onKeyPress fires after the key has been pressed, but before the operation has been applied to the control's text. The later is only fired when focus is removed from the control and edits were made.
My question: Is there a way to capture the event, after the key press has been applied to the control but w/o removing focus (so I can work off of the resultant text)? Or is this pretty much the options I have to work off of?
Thanks!
You may also want to look at onkeyup and onkeydown events. I suspect you're interested in onkeyup. Perhaps you could provide more info and I could give a more complete example.