Automatically move to the following input field once one character is entered into a disabled input field

Hey there! I am interested in creating an Auto tab feature that moves to the next input field after entering 4 characters. Additionally, I want it to skip disabled fields and move to the next enabled one.

How are you all doing with these questions? Auto tab to next input field when fill 4 characters

<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" disabled="disabled" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" disabled="disabled"  />
<input class="inputs" type="text" maxlength="1" />



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

Answer №1

Utilize the nextAll() method (since the next() method only selects immediate adjacent siblings) in combination with :enabled (to target only enabled inputs) and :first (to focus on the first or nearest input field).

$(".inputs").keyup(function () {
   if (this.value.length == this.maxLength) {
     $(this).nextAll('.inputs:enabled:first').focus();
   }
});


$(".inputs").keyup(function() {
  if (this.value.length == this.maxLength) {
    $(this).nextAll('.inputs:enabled:first').focus();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" disabled="disabled" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" disabled="disabled" />
<input class="inputs" type="text" maxlength="1" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn how to retrieve data from a JSON server in Angular 8 and then sort that data in a table by utilizing checkboxes

Currently, I'm in the middle of an Angular project where I could use some assistance on how to filter data through checkboxes within a table. The setup involves a home component that displays data from a JSON server in a tabular format using a service ...

javascriptangularangular6angular7angular8

"Enhancing user experience with React.js and Socket.io: dynamically updating list item positions based on

export default class ReactApp extends React.Component { constructor(props) { super(props) this.state = { status: [], services: [] } fetchData((err,opt, data) => { function Exists(l ...

javascriptreactjssocket.ionext.js

Generating interactive HTML content using a JSON file with AngularJS

Currently, I am working on a project where I have a nested JSON object within AngularJS. In order to create a menu from this JSON using the Bootstrap navbar, I need assistance with parsing the highly nested structure and generating dynamic HTML code to d ...

jsonhtmlangularjs

Is it possible to send a post request without any attributes in the form element?

I am currently iterating through zip codes and extracting data from the following website http://www.airnow.gov/index.cfm?action=school_flag_program.sfp_createwidget Below are the form and input elements: <form name="groovyform"> <input type="te ...

pythonhtmlformsweb-scrapingpython-requests

What strategies can I use to reduce duplication in my HTML and JavaScript code?

Struggling with messy HTML and JS code? If you're using Bootstrap-3 and jQuery-1.11.0, dealing with dropdowns might be tricky. Especially when it comes to switching icons based on the dropdown state and ensuring only one dropdown is open at a time. Is ...

javascriptjqueryhtmltwitter-bootstrapdry

Utilize CSS to conceal the direct ancestor of a specified element

Is it achievable using just CSS to conceal a parent element when a child element lacks a particular class? <!-- hide this --> <div class="parent"> <p class="badChild" /> </div> <!-- do not hide this --> <div class="pare ...

css

Floating elements with varying heights cause adjacent elements to be pushed downwards

I'm dealing with 6 elements that I want to display in two rows of 3 each by floating them. However, the content of each element varies in height, causing layout issues when a taller element disrupts the float of its siblings: Check out this example C ...

htmlcss

Smooth scrolling effect with jQuery

I'm attempting to create an animation similar to where the page loads and tracks how far you've scrolled. I have experimented with various methods, including: $(window).scroll(function() { var scroll = $(window).scrollTop() ...

jquery

What would be the benefit of separating the express and app components?

Every time I look at an Express app, these two lines catch my eye. const express = require('express'); const app = express(); I always wonder if any parameters can be passed to express(). After checking here, I didn't find any. https://e ...

javascriptnode.jsexpress

I am experiencing an issue with Bootstrap's Jumbotron where the bottom border is not visible even after setting it. I am quite curious as to why

I'm new to using bootstrap and I've encountered an issue with the Jumbotron class. Specifically, I have set a border for the Jumbotron and it appears on the top, left, and right sides, but for some reason, the bottom border is missing. After goi ...

htmlcsstwitter-bootstrapborder

Tips for showing HTML content in an Angular UI grid

I've been attempting to showcase HTML within the grid by checking out this resource: Add html link in anyone of ng-grid However, my attempts led me to this code snippet: var app = angular.module('myApp', ['ngGrid']); ...

javascriptangularjsangular-uing-grid

Encountering Problems with Ajax Refresh During Page Initialization

I'm currently experiencing issues with loading content on page load using ajax. The ajax is successfully calling the correct action in the corresponding controller. The initial part of the action code, where I update the database, is functioning as ex ...

phpjqueryajaxyii

Rails 7: It appears that the browser is disregarding all importmap JavaScript packages

Last week I worked through two different tutorials, successfully achieving most of the tasks. However, three crucial issues remain unresolved. Upon closer inspection, it became evident that all three problems revolve around the browser seemingly disregardi ...

javascriptruby-on-railsimport-maps

attach an event listener for the click event

I have a button set up like this Inside index.html: <body> <section> <button id="open-file">Open File</button> ...(series of other similar buttons)... </section> </body> <script> requir ...

javascriptnode.jselectron

Experiencing difficulties with mocha and expect while using Node.js for error handling

I'm in the process of developing a straightforward login module for Node. I've decided to take a Test-Driven Development (TDD) approach, but since I'm new to it, any suggestions or recommended resources would be greatly appreciated. My issu ...

javascriptnode.jstddmocha.js

Ensuring that links are functional across all directory levels: a comprehensive guide

Looking at the image included here, you can see a preview of the website I'm currently building. The plan is to have individual pages for each machine in the company's lineup. Since the navigation bar and menu will be consistent across the entire ...

phphtmlcsstwitter-bootstraphref

Turn on and off jquery tabs depending on user's choice

Currently, I am utilizing jQuery tabs to showcase specific data. However, I aim to offer users the flexibility to choose whether they prefer to view the content as tabs or in a sequential manner. Even after attempting to manipulate the ui-tabs classes ba ...

javascriptjqueryselecttabs

Is there a way to initiate an Ajax Request when one of the two buttons in a form is clicked?

Is there a way to streamline the code for sending a request from one page to another using a form with 2 buttons? <form method="post"> <button id="button_1" value="val_1" name="but1">button 1</button> <button id="button_2" val ...

javascriptphpjqueryajax

Step-by-step guide on removing all elements except the last one using pure JavaScript, without relying on jQuery and utilizing document.querySelectorAll(".someClass"):

Here's my question: Is there a way to remove all elements except the last one with the same class name using vanilla JavaScript without jQuery? In jQuery, I can achieve this in one line like so: $('.someClass').not(':last(2)').re ...

javascriptjquery

Performing the AJAX request prior to the document being fully loaded

What I need is for an AJAX call to be made before the document is ready, and then use the response from the AJAX call to update certain HTML elements. This is what I currently have: var ajaxget = $.ajax({ type: 'GET', url:'/xxx ...

javascriptjqueryajax