When using jQuery, the onChange() function can be used to switch focus

Question

When using jQuery, the onChange() function can be used to switch focus

Make sure to check out this fiddle first: http://jsfiddle.net/7Prys/

I am looking for a way to automatically focus on the next input field when a user enters a value in the previous field. This should happen until the fourth input field. Is there a simple jQuery solution for this? Additionally, I want the previous input field to be focused when the backspace key is pressed.

Below is the HTML code:

<input type="text" maxlength="1" class="small" />
<input type="text" maxlength="1" class="small" />
<input type="text" maxlength="1" class="small" />
<input type="text" maxlength="1" class="small" />

And here is the jQuery code:

$(".small").onchange(function () {
    $(this).next().find(".small").focusIn();
});

jquery html css

Answer 1

Answer №1

Here's a solution that worked for me:

$(".small").keyup(function (e) {
    if(e.keyCode == 46 || e.keyCode == 8){
        $(this).prev('.small').focus();
    }
    else {
      $(this).next('.small').focus();
    }
});

Check out the working example on http://jsfiddle.net/5Sv2f/

Answer 2

Here's a solution that worked for me:

$(".small").keyup(function (e) {
    if(e.keyCode == 46 || e.keyCode == 8){
        $(this).prev('.small').focus();
    }
    else {
      $(this).next('.small').focus();
    }
});

Check out the working example on http://jsfiddle.net/5Sv2f/

Answer 3

Answer №2

Here is the solution:

$(".small").on('keyup', function (e) {
    if(e.keyCode == 8){ /* backspace */
        $(this).prev('.small').focus();
    }else{
        $(this).next('.small').focus();
    }
});

Fiddle: http://jsfiddle.net/7Prys/10/
This code will move to the next input field when any key other than backspace is pressed, and go to the previous input field when backspace is pressed. Optionally, you can also include || e.keyCode == 46 in the if statement to recognize the Delete key.

It's important to note that there is no .onChange or .focusIn method. You should use .on for the keyup event like shown in my example. Additionally, instead of using .find().next('.small'), simply use .next('.small').

Answer 4

Here is the solution:

$(".small").on('keyup', function (e) {
    if(e.keyCode == 8){ /* backspace */
        $(this).prev('.small').focus();
    }else{
        $(this).next('.small').focus();
    }
});

Fiddle: http://jsfiddle.net/7Prys/10/
This code will move to the next input field when any key other than backspace is pressed, and go to the previous input field when backspace is pressed. Optionally, you can also include || e.keyCode == 46 in the if statement to recognize the Delete key.

It's important to note that there is no .onChange or .focusIn method. You should use .on for the keyup event like shown in my example. Additionally, instead of using .find().next('.small'), simply use .next('.small').

Answer 5

Answer №3

Give this a shot:

$(".small").keyup(function () {
    $(this).next().focus();
});

Check out this jsFiddle demo

Just a heads up, in jQuery it's .change(), not .onchange(). Also, remember that .find() is for searching through descendant elements, so if the elements you're looking for are siblings, it won't work as expected.

Answer 6

Give this a shot:

$(".small").keyup(function () {
    $(this).next().focus();
});

Check out this jsFiddle demo

Just a heads up, in jQuery it's .change(), not .onchange(). Also, remember that .find() is for searching through descendant elements, so if the elements you're looking for are siblings, it won't work as expected.

Answer 7

Answer №4

There seem to be several issues at play here.

onchange is recommended to be replaced with change, although this will only activate once the input field loses focus, which may not be ideal. It might work better to utilize .keyup.

$(this).next() refers to the input element, so using $(this).next().find(".small") will not yield any results. You could consider using $(this).next(".small"), but in this case, $(this).next() should suffice.

http://jsfiddle.net/ExplosionPIlls/7Prys/6/

UPDATE: To determine if the backspace key was pressed, you can check for e.which == 8 and then make use of .prev instead.

http://jsfiddle.net/ExplosionPIlls/7Prys/11/

Answer 8

There seem to be several issues at play here.

onchange is recommended to be replaced with change, although this will only activate once the input field loses focus, which may not be ideal. It might work better to utilize .keyup.

$(this).next() refers to the input element, so using $(this).next().find(".small") will not yield any results. You could consider using $(this).next(".small"), but in this case, $(this).next() should suffice.

http://jsfiddle.net/ExplosionPIlls/7Prys/6/

UPDATE: To determine if the backspace key was pressed, you can check for e.which == 8 and then make use of .prev instead.

http://jsfiddle.net/ExplosionPIlls/7Prys/11/

Answer 9

Answer №5

Forget about the on change event, it doesn't exist.

Instead, try using the change event.

Answer 10

Forget about the on change event, it doesn't exist.

Instead, try using the change event.

Answer 11

Answer №6

Remember, the correct syntax is .change() and not .onChange()

http://api.jquery.com/change/

Answer 12

Remember, the correct syntax is .change() and not .onChange()

http://api.jquery.com/change/

When using jQuery, the onChange() function can be used to switch focus

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Double-data glitch: Jquery inadvertently sending information twice with each click

Preventing Flash of Unstyled Content in ElectronJS Browser Windows

Challenges with the direction of Telerik's GridNumericColumn

Steps to insert a style tag into the head using an AngularJS directive

What is the best way to create a table row when there is no data available?

In Javascript, you can enhance your axes on a graph by adding labels at both the

Is there a method for displaying a gif with an alpha channel for transparency effects?

Ways to invoke a JavaScript function via a hyperlink. Various techniques to achieve this task

Why isn't the JQUERY AJAX request showing up on the PHP page?

Steer clear of cross-domain solutions

The act of sorting an item in jQuery triggers a reordering of items

"Printed documents fail to display underlined text using Bootstrap styling

Unable to handle JQuery POST to PHP in success function

Different Line Thickness in Dropdown Menu

Adding identifiers to columns in DataTables depending on the value of another attribute

Issue: Login form in AngularJS does not reset upon page reload

The Angular service/value is failing to retrieve the updated variable from the $(document).ready() function

Updating data in a SQL database using PHP when a button is clicked

Personalize the menu item in material ui

Customizing CSS by replacing link file styles with code in the HEAD section