Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

focusing on next input (jquery)

Tags:

I've got four inputs that each take one number. What I want to do is set the focus automatically to the next input once the number has been set. They all have the class "inputs".

This didn't quite work:

$(".inputs").keydown(function () {              $(this).next().focus();         }); 
like image 790
domino Avatar asked May 10 '12 17:05

domino


People also ask

How do you focus on next input?

To focus on the next field when pressing enter in React, we can set the onKeyDown prop of the inputs to a function that gets the next input and call focus on it. We have the handleEnter function that checks if the pressed key is Enter by checking the event. key property.

What is focus function in jQuery?

jQuery focus() Method The focus event occurs when an element gets focus (when selected by a mouse click or by "tab-navigating" to it). The focus() method triggers the focus event, or attaches a function to run when a focus event occurs. Tip: This method is often used together with the blur() method.


1 Answers

I would suggest setting maxlength as 1 to each textbox and switch to next one once the val.length and the maxlength is same.

DEMO

$(".inputs").keyup(function () {     if (this.value.length == this.maxLength) {       $(this).next('.inputs').focus();     } }); 

Edit: Spent some time for the following (not fully tested, but basic tests worked fine)

   1. Allowing just numeric chars      2. Allow some control like del, backspace, e.t.c    3. Backspace on empty textbox will move to prev textbox    4. charLimit var to dynamically decide how many char you want to restrict. 

Code:

$(function() {     var charLimit = 1;     $(".inputs").keydown(function(e) {          var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];          if (e.which == 8 && this.value.length == 0) {             $(this).prev('.inputs').focus();         } else if ($.inArray(e.which, keys) >= 0) {             return true;         } else if (this.value.length >= charLimit) {             $(this).next('.inputs').focus();             return false;         } else if (e.shiftKey || e.which <= 48 || e.which >= 58) {             return false;         }     }).keyup (function () {         if (this.value.length >= charLimit) {             $(this).next('.inputs').focus();             return false;         }     }); }); 

DEMO

like image 92
Selvakumar Arumugam Avatar answered Oct 05 '22 14:10

Selvakumar Arumugam