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?
Related
I've run into this weird problem while developing an app for KaiOS using Svelte3. When the input field is set to type number the backspace doesn't work. At all.
<input
bind:this={ref}
bind:value
type="number" />
When it's set to "text" it works perfectly fine. Backspace removes characters as it's pressed. Backspace in this case is the "Call End" button on KaiOS devices. I don't know if this is a KaiOS problem or a Svelte3 problem.
I'm not very skilled in WebDev technologies, so I don't know what else to try. Some additional info that might point towards something.
I have one listener globally
window.addEventListener("keydown", onKeyDown, true);
Which is attached in my KeyListener that I use to control my app navigation through selectable elements. This also doesn't fire when the backspace is pressed while an input field has focus. Things I have tried.
Assign functions to onkeydown, onkeyup, onkeypressed (none of them fire the backspace call)
Removed the event listener that I mention above, changes nothing.
Assign the functions in a non-svelte way as pure JS inline functions.
On KaiOS only onkeydown fires, incase that might give any of web dev JS experts a hint. I don't know what else to do. Any suggestions would be appreciated.
We have no idea why this works but setting the input type to "tel" makes the backspace key fire and the input field to act as normal while still allowing numbers only.
To handle events on window you can use <svelte:window>. For example:
<svelte:window on:keypress={handleKeypress}/>
But if all you want to do is monitor keypresses on an input you can do it on the <input> directly with <input on:keypress={...}/>.
Here's an example of handling keypress on an input: https://svelte.dev/repl/bfd93b0799c142979eefa1f2558bfb96?version=3.20.1
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
What I am trying to achieve is to intercept a keypress event and make the app behave as if another key was pressed, e.g. if a user presses a comma key when in an input element, I want this to be replaced with the dot key being pressed, or another example if a user presses enter, I want it to react as if the tab key was pressed.
It sounds like you are having user to fill in a form.
I do not agree on 'replacing' pressed key. I think it will lead to chaos, plus, no matter how you do it (using JQuery.trigger or jQuery plugin like sendkey), you will have to wrap it into directive anyway (for notifying angular external events/changes).
However, you can register an ng-change event to the input and replace all commas with dots.
For moving the focus, you can register a keyup event by using a directive llike this and move the focus to the next sibling field or any input you wish.
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.
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/