On a JavaScript page, I pop up an alert if the user hits the enter key by using
if(evt.keyCode == 13){
alert("Return Key Pressed");
}
but the event does not fire when I hit the return key on the iPad. How do I catch the event?
The iPad keyboard does fire the keypress event with a key code of 13 if you press return. This sounds like you've got something else going awry
Here's a quick jsfiddle to verify with: http://jsfiddle.net/359wG/
According to https://api.jquery.com/keypress/
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.
A keypress event handler can be attached to any element, but the event
is only sent to the element that has the focus. Focusable elements can
vary between browsers, but form controls can always get focus so are
reasonable candidates for this event type.
I moved my return-key listener to an anchor tag, which on IPad is treated as a 'focusable element' similar to form controls.
Related
I have tried the W3 Schools example code for handling the enter key for input text. I copied the source code from that site's page and pasted below.
The problem is that on FireFox, if I press the enter key to finish Japanese input mode, the code is also triggered. On Edge, it did not. Is this a FireFox bug, or just a different behaviour? Anyway, how can I circumvent this?
var input = document.getElementById("myInput");
// Execute a function when the user presses a key on the keyboard
input.addEventListener("keypress", function(event) {
// If the user presses the "Enter" key on the keyboard
if (event.key === "Enter") {
// Cancel the default action, if needed
event.preventDefault();
// Trigger the button element with a click
document.getElementById("myBtn").click();
}
});
You should rather use KeyDown event. KeyPress is reporting every keycode from keyboard. Some keys on keyboard are not only putting one keycode but multiple keycodes. KeyDown event should pack all keycode from one actual pressed key into one event.
KeyPress is meant to do more low level approach
in google search box when we typing something , On that time some auto complete result coming after select any one it automatically fire no need to
focusout()
or
any click()
how it create
There are basically three key related events keydown, keypress and keyup, it is using combination of these events... To make you understand more here is the detail
keydown is fired when the key is down (like in shortcuts; for example, in Ctrl+A, Ctrl is held 'down'.
keyup is fired when the key is released (including modifier/etc keys)
keypress is fired as a combination of keydown and keyup, or depending on keyboard repeat (when keyup isn't fired). (this repeat behaviour is something that I haven't tested. If you do test, add a comment!) If user keep key pressed, then this event is fired for every character added by the browser.
NOTE: Remember one thing, if you are fetching the value from the field never ignore the keyup event, because while getting text of the input you won't get the last type character from the textfield until keyup event is fired...
See this fiddle to get more idea about key events..
Note this question. I see that there are other approaches besides just triggering the tab keypress event, but I'd still like to know why triggering the tab key press event doesn't move focus to the next input field.
Code Pen
HTML
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
JS
$('textarea').on('keydown', function(e) {
if (e.metaKey && e.which === 40) {
console.log('test');
$(this).trigger({
type: 'keypress',
which: 9
});
}
});
Because the tab event is a native browser event/action for changing focus. The .trigger() function only triggers the event handlers that are assigned to it. Note there is more information given from jQuery's site:
The .trigger() function cannot be used to mimic native browser events, such as clicking on a file input box or an anchor tag. This is because, there is no event handler attached using jQuery's event system that corresponds to these events.
There is a plug-in for this though called jquery-simulate to handle this. That being said the tab key changing focus is actually a default action in the web browser. Firing a browsers native event does not mean it will do it's default action, as the documentation for KeyboardEvents mentions:
Note that manually firing an event does not generate the default action associated with that event. For example, manually firing a key event does not cause that letter to appear in a focused text input. In the case of UI events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself.
In my webpage I have a div, for which onkeydown event is handled. The onkeydown event is fired for keyboard keys character key 'z','a','p' etc. But the for the character key such as 'x','f','m','q' etc event is not fired . After pressing character key'f' I could see that the focus moves to the next element. Anyone please explain how this occur?
I could see the same happens in Chrome (version: 32) , IE (version:11) , Firefox (version:27)
Some keys might be used for some default operation by a browser. For example Enter submits a form in whitch the div is in IE. Try to use e.preventDefault(); before your own event code. Try the code below.
$(document).on("keydown", "mydiv", function(e) {
e.preventDefault();
});
I'm building a virtual keyboard that assigns images to keycodes, and appends them in spans after a keydown event. Problem comes with the DELETE functionality.
if (e.keyCode == 8) {
$('span:last').remove();
}
Since everything happens outside of a textarea or input field, this triggers the browser's back button. Any help would be much appreciated!
That's a backspace, not a delete, for starters.
Next, backspace is the keyboard shortcut for "Back", so you MUST return false; in the event handler to prevent that default action taking place.
return false in whatever function you're handling that event. That should stop the default behavior.