I wondered if I could have an input field, that, if someone (who is typing in the input field) presses the TAB key, not switches focus (so it must stay focused on the first input field and not go to the next).
Also, it must detect when someone presses the TAB key, and execute a function when the TAB key is released.
The code has to be in pure javascript.
Is this possible? If so, how?
You can use onkeydown to declare a function on the document to capture all key presses (or just use the specific element). Use this to check for tab and execute your function accordingly.
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 9) {
evt.preventDefault();
alert("Tab");
}
};
Use preventDefault() to prevent the default action for the key pressed.
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
Js has a built-in function that allows you to retrieve data from an input when a user enters something into it: input.addEventListener("input", myFunction()).
But it does not suit me, because it is executed every time the user enters at least one character. Instead, I need an approach in which the function would be called only when the user typed something and then pressed enter or clicked on a page in different place.
You can use the following methods for this:
use onblur for the input elements. This will trigger once the user clicks anywhere outside of that input box.
use onsubmit for the form. This will trigger when the user presses enter or submits the form in anyway.
You can use the focusout event which fires when an element is about to lose focus and for the enter key you could check the event.key within the keypress event which is fired when a key that produces a character value is pressed down. like so:
input.addEventListener("keypress", function (e) {
if (e.key === 'Enter') {
// code for enter
}
});
focusout - https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event
keypress - https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event
So I've got this javascript:
<script type="text/javascript">
function OnKeyPress() {
var charCode = window.event.keyCode;
if (charCode == 13) {
window.event.keyCode = 9;
}
} document.onkeypress = OnKeyPress;
</script>
The idea is to catch an enter key press, and switch it to tab key press. And it half works - it catches the enter key. But it doesn't make it register as a tab key. I've tried using other keycodes as well (18 for alt) to confirm I wasn't just not seeing the tab happen.
Can anyone see what the problem is? Working in ASP.NET fwiw.
Thanks!
You can't change the keyCode and have it trigger that event instead. It's just a captured value at that point. You might be able to obtain the effect by calling a function that simulates the desired key press event and canceling the current event instead.
You'll have to create the event handler for it.
Take a look:
How to trigger event in JavaScript?
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.
I have a canvas element which I would like to make interactive by allowing users to enter text and remove it. Adding text works as expected, however deletion using the backspace key triggers the browser's back action.
How can I stop this action?
Cheers,
A.
Use the keydown event. Add the handler either to the document (bad, because it disables expected browser behaviour on the rest of the page, not just the <canvas> element) or give your <canvas> element a tabindex and add the keypress handler to it (better).
function preventBackspaceHandler(evt) {
evt = evt || window.event;
if (evt.keyCode == 8) {
return false;
}
}
document.onkeydown = preventBackspaceHandler;