How to move focus on next field when enter is pressed?
It fails because this
is the document
in your code.
You want to use the index of the currently focused item (document.activeElement
), or if you use delegated events you can make sure this
is the current item.
This final version works whether there are tabindexes
or not. It also wraps around:
JSFiddle 2: http://jsfiddle.net/TrueBlueAussie/5WkVW/12/
They both use a custom jQuery selector that I add called :focusable
to select all focusable element (including links):
// register jQuery extension
jQuery.extend(jQuery.expr[':'], {
focusable: function (el, index, selector) {
return $(el).is('a, button, :input, [tabindex]');
}
});
$(document).on('keypress', 'input,select', function (e) {
if (e.which == 13) {
e.preventDefault();
// Get all focusable elements on the page
var $canfocus = $(':focusable');
var index = $canfocus.index(this) + 1;
if (index >= $canfocus.length) index = 0;
$canfocus.eq(index).focus();
}
});
You can use the same custom selector in the event handler if you like. Then it will even work on anchor links (if you change the event to keydown instead of keypress):
e.g.$(document).on('keydown', ':focusable', function (e) {
Example with link: http://jsfiddle.net/5WkVW/15/This also uses a delegated on
, listening for the keydown
event on the document
. It then applies the jQuery selector, it then applies the function to any matching element that caused the event. This is much more efficient as it only applies the selector at event time (rather than apply multiple event handler to each DOM matching element).
Old versions below:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/5WkVW/3/
$(document).keypress(function(e) {
if(e.which == 13) {
// Do something here if the popup is open
//alert("dd")
var index = $('.ui-dform-text').index(document.activeElement) + 1;
$('.ui-dform-text').eq(index).focus();
}
});
*Note: alerts can interfere with focus
, so use console.log
for output like that and view in most browser's debug window (like Chrome's F12 debugging tools).
This one wraps back to the first item from the last and also works on selects (the default behavior is blocked, so you can only use space to open or up/down to select options.
$('input,select').on('keypress', function (e) {
if (e.which == 13) {
e.preventDefault();
var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');
console.log($next.length);
if (!$next.length) {
$next = $('[tabIndex=1]');
}
$next.focus();
}
});
Requested "document" version: http://jsfiddle.net/TrueBlueAussie/5WkVW/5/$(document).on('keypress', 'input,select', function (e) {
if (e.which == 13) {
e.preventDefault();
var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');
console.log($next.length);
if (!$next.length) {
$next = $('[tabIndex=1]');
}
$next.focus();
}
});
How to move to next input field when enter key is pressed?
That should work:
if (whichKey == 13) {
console.log('successful');
evt.preventDefault(); // if it's inside <form> tag, you don't want to submit it
document.getElementById('nextInputID').focus();
}
Angular - Focus on next input field after pressing the Enter key
One Way to solve this problem is dynamically assign an id to your input fields in the form based on the number of input fields.
Then attach a keyup trigger for your desired function like
<form [formGroup]="myForm">
<div formArrayName="things">
<div *ngFor="let thing of things.controls; let i=index">
<label [for]="'input' + i">Thing {{i}}:</label>
<input type="text" [formControlName]="i" [name]="'input' + i" [id]="'input' + i" (keyup.enter)="focusNext(i)" />
</div>
</div>
</form>
once you have added a dynamic id to each of the form fields and you have defined a relevant function for the manipulation you want to perform which might look like this
public focusNext(i) {
let nextElementSiblingId = 'input'+ i+1;
if (i<this.things.controls.length) {
document.querySelector(`#${nextElementSiblingId}`).focus()
}
}
Hope it solves your problem !
Focus on next field on pressing enter key in Vuejs
EDIT: So, it was pretty hard to hack Vuetify and let it behave like a basic input since it was not sending it's DOM element through @change
. So, we achieved it with some hacky watcher
and this nextElement.$el.querySelector("[role='button']").click()
selector, to emulate a click and open the v-select
.
For some reason, it's not working on Codesandbox, so I don't have a link there to share, only my github repo with a working solution.
Here is the chat that we had: https://chat.stackoverflow.com/rooms/228426/focus-on-next-field-on-pressing-enter-key-in-vuejs
Here is how the final result looks like: https://www.loom.com/share/9e504e14ceb44644976c73fb4ced5c1c
How to move focus to next element on enter on dynamically created select
Kind of hard to guess what you are asking for.
There are already multiple suggestions and answers available on SO.
Enter key press behaves like a Tab in Javascript
document.addEventListener('keydown', function (e) {
if (event.keyCode === 13 && event.target.nodeName == 'SELECT') {
var form = event.target.closest('form');
var index = Array.prototype.indexOf.call(form, event.target);
form.elements[index + 1].focus();
return false;
}
});
<form>
<div id = "Customer">Customer</div>
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<input type = "text">
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<input type = "text">
</form>
Jquery: On enter focus next input
Change:
if (e.KeyCode() === 13) {
To:
if (e.which === 13) {
KeyCode()
is not the proper way to get the keycode. You are thinking of event.keyCode
, which is deprecated. If you are using jQuery, event.which
is normalized to work on all browsers. Without jQuery, make sure you check all cases:
var key = event.which || event.charCode || event.keyCode
To focus the next input element, do this:
$(this).next('input').focus();
Related Topics
React Button Onclick Redirect Page
Converting String Date in React/Javascript
Vue.Js Add Objects to Existing Array
Regex to Find Json Values Without Quotes
How to Remove Special Character from Json Without Parsing
Save Image File from Image Url JavaScript HTML
Draw a Connecting Line Between Two Elements
How to Render a Collection of Children Using Array
Open the File Upload Dialogue Box Onclick the Image
Force Download an Image from Src Using JavaScript
How to Show Which Question a User Is on When Taking My Quiz
React: Do Children Always Rerender When the Parent Component Rerenders
Retaining the Textbox Values Even After Refresh
How to Change Colour of Text Based on Its Value When a Page Initially Loads
Expected to Return a Value At the End of Arrow Function Array-Callback-Return on Filter Function
Browserify :- Uncaught Typeerror: Fs.Readfilesync Is Not a Function
Validating Array of Different Object Shapes in Yup
Html Input File Selection Event Not Firing Upon Selecting the Same File