What's the difference between keyup, keydown, keypress and input events? - javascript

I have been trying to understand JavaScript keypress, keydown, keyup and input events. But I found them quite confusing. Could someone please point out the exact differences? Also I would like to know do all of them get triggered when the user paste a piece of text.

According to jQuery docs:
The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser.
The keyup event is sent to an element when the user releases a key on the keyboard.
The oninput event it's an event that triggers whenever the input changes.
However the input event is not supported in IE version below 9. In that case, you could use proprietary event onpropertychange, it does the same as oninput.
But in your case, you could use the paste and change event together. You should use change too because paste only happens on browsers that support it on an explicit paste.

Since this is being treated as the definitive JS answer (rather than just a jQuery answer) here's a current standard JavaScript answer with MDN references:
input event - fired when the content changes. This includes mouse pastes and non-keyboard input.
keyup event - fired when a key is released. This includes shift key, control key, and other keys that don't change the value of input elements.
Docs for all events

Related

How to tell if a keypress event would generate input

Some keypress events generate input (e.g. normal characters) and some don't (e.g. arrow keys). Is there any way to tell whether a particular keypress event is input-generating?
Additional context as requested:
I'm using contentEditable to edit text. I would like to pass non-input-generating events (cursor movement, selection, etc.) to the underlying element, but handle input-generating events myself.
It turns out that most browsers don't generate keypress events for arrow keys (although this doesn't seem to be guaranteed to be the case by the standard as far as I can see).
In addition, the standard defines a beforeinput event, which looks to be exactly what I want. Except it doesn't actually seem to be implemented by any browsers.
not sure what you mean... maybe you are talking of
var key = ev? ev.which: window.event.keyCode
what gives you the key that was pressed, so you can find out if "char" or not...
regards Joachim

Javascript event when user removes focus on textbox

I want to know the right event when the user remove focus on a text box. Whether if the user presses tab or clicked to another field. I've seen some solutions like onchange or blur. But it doesn't satisfy all scenarios when the user remove focus. I want to use pure javascript or jquery. Thanks!
jquery focusout() is the best suited in this case
go thought this link
jQuery .focusOut() documentation
I find .focusOut() useful when I'm more specifically concerned with losing focus from a defined input or input group, since it supports event bubbling.
see the demo in http://api.jquery.com/focusout/ it works when user uses tab to focusout or clicks anothoer field
FYI: The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).
you can use blur() event.
The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as . In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.

Difference between typing and pasteing in a field

If I use xss, what's the difference between typing in ALERT('DSSA');, or just paste it to a search textfield? In a site, typing works, and makes the alert, but if I just paste it, than it doesn't. To prevent the question, I don't want to hack any site, I'm just interested in network security.
thanks for the answer
This will be because the programmer who built the website is lazy and hasn't listened for the onpaste event.
Typing fires the onkeydown, onkeypress and onkeyup events, and are the standard events to consider when watching for user input.
It would seem those are the only events the programmer has listened for (which makes this irrelevant of network security).
If this is not the case, then he'll be using two different event handlers for the events; one which escapes the input, and in the other he's forgotten.
I may not have understood the question properly.
Typing triggers keyUp, keyDown and keyPress events on the element. If the codes are programmed to capture them only, then only those events will be captured.
Pasting can be done using keyboards, mouse and browser options. So this depends on which events you are listening too. There is a separate event called onpaste which will ease everything.
What I mean is, lets say my code is written to capture the pasting my pressing "Ctrl" + "v" only, but if mouse and browser options are used to paste on the
element, then it is configured to capture mouse events also, it cannot
be captured.

How Google detects input in search box to display instant results?

How is Google detecting user input? I looked around and the text field does not have the onkeyup or onchange events.
Is there any other way to detect user input in a text field?
it does have keyup and keydown listeners, but they are assigned at runtime, via addEventListener("keyup", ...). Use your browser's DOM inspector to select the input element, and then drill into the event listeners currently assigned (in webkit's inspector, that's under "Event Listeners" at the bottom of the right-hand pane) -- you'll see keyup, keydown, and several others.
It does have event listeners. Using the inspect element on chrome you can clearly see the listeners - highlighted in the screen shot below.
The same principle as autocomplete:
http://www.javascript-examples.com/autocomplete-demo/
I would say an onblur onkeyup/down event that triggers a custom event that waits for a pause or space, then sends the data, then handles the return.
After playing with it for a while here is what I came up with at jsfiddle:
http://jsfiddle.net/fauxtrot/Ejqyb/

Javascript event between onFocus and onChange

I'm working a web page where I'd like to run some JavaScript code when a user alters text in a given input field, but I can't figure out which event to trap (assuming one exists) that would give me the behavior I'm looking for. onFocus happens too soon -- if the user selects the field but doesn't change any text, I don't want anything to happen. But onChange is too late -- I'd like the JavaScript to fire as soon as the user starts typing, not when the user is done typing and clicks something else. How could I accomplish this?
onkeydown (although it wouldn't work for pasted data, where onchange is probably better).
There are a couple events that can help you:
onKeydown (fired when a key is pressed down)
onKeyup (fired when a key is released)
onKeypress (fired when a key is pressed and then released)
keydown / keyup / keypress?

Categories