Transfer information to the following section once the current one has been completed - Utilizing JavaScript tabulation

Question

Transfer information to the following section once the current one has been completed - Utilizing JavaScript tabulation

I'm facing an issue with my script that involves input data into a div field where each div should automatically move to the next one when it reaches a certain character limit.

While the script works well when using inputs, I encountered a problem when trying to input data via a virtual keyboard and not being able to use focus. I attempted to input data to specific divs based on their classes, but switching classes once a div is full did not produce the desired result.

var a = document.getElementById("a"),
    b = document.getElementById("b"),
    c = document.getElementById("c");
var $write = $(".active");

$('#keyboard').click(function() {
    var checka = $('#a').html().length;
    var checkb = $('#b').html().length;

    if (checka === 4) {
        a.removeClass("active");
        b.addClass("active");
    } else if (checkb === 4) {
        b.removeClass("active");
        c.addClass("active");
    }

    var $this = $(this),
        character = $this.html();
    $(".active").html($write.html() + character);
});

$('.delete').click(function() {
    var html = $write.html();
    $write.html(html.substr(0, html.length - 1));
    return false;
});

You can view the demo here: http://jsfiddle.net/4m5fg/456/

javascript jquery html css

Answer 1

Answer №1

Take a look at this code snippet

$(".keyboard").on("click", function() {

  $(".block").removeClass("active").filter(function() {
    return this.innerText.length < 4;
  }).first().addClass("active").append(this.innerText);

});

$(".delete").on("click", function() {

  var inputs = $(".block").removeClass("active").filter(function() {
    return this.innerText.length > 0;
  }).last().addClass("active").html(function() {
    return this.innerText.substr(0, this.innerText.length - 1);
  });

});

If you are creating a virtual keyboard, it is recommended to use class instead of id. This allows for easier selection and manipulation of elements like .keyboard.

By using this.innerText.length, you can determine if the input is complete and customize it dynamically by changing the 4 with an attribute.

To manage the 'active' class, remove it from all .blocks before adding it to the current block when needed.

For the 'DEL Key', identify the last block with text and remove the last character accordingly.

EDIT: Check out the updated example with active class

Answer 2

Take a look at this code snippet

$(".keyboard").on("click", function() {

  $(".block").removeClass("active").filter(function() {
    return this.innerText.length < 4;
  }).first().addClass("active").append(this.innerText);

});

$(".delete").on("click", function() {

  var inputs = $(".block").removeClass("active").filter(function() {
    return this.innerText.length > 0;
  }).last().addClass("active").html(function() {
    return this.innerText.substr(0, this.innerText.length - 1);
  });

});

If you are creating a virtual keyboard, it is recommended to use class instead of id. This allows for easier selection and manipulation of elements like .keyboard.

By using this.innerText.length, you can determine if the input is complete and customize it dynamically by changing the 4 with an attribute.

To manage the 'active' class, remove it from all .blocks before adding it to the current block when needed.

For the 'DEL Key', identify the last block with text and remove the last character accordingly.

EDIT: Check out the updated example with active class

Answer 3

Answer №2

Your code has several issues that need to be addressed:

In order to use the .removeClass and .addClass functions, you should have a jQuery object instead of a Node element.
If the first div already contains 4 A, the checka value will remain 4, so it's important to also check if checkb == 0.
Make sure to retrieve the current .active each time instead of just on page load. Placing var $write = $(".active"); inside the click event is necessary.

var a = $("#a"),
    b = $("#b"),
    c = $("#c"),
    $write;

$('#keyboard').click(function(){
  var checka = $('#a').html().length;
  var checkb = $('#b').html().length;

  if (checka === 4 && checkb === 0) {
    a.removeClass("active");
    b.addClass("active");
  }
  else if (checkb === 4) {
    b.removeClass("active");
    c.addClass("active");
  }

  $write = $(".active");

  var $this = $(this),
      character = $this.html();

  $(".active").html($write.html() + character);
});

$('.delete').click(function() {
  var html = $write.html();
  $write.html(html.substr(0, html.length - 1));
  
  if ($write.html().length == 0) {
      $write = $write.prev();
  }
  
  return false;
});

.block {
  background: #fff; 
  color: red; 
  border: 0; 
  width: 45px; 
  height: 20px; 
  padding: 10px; 
  float: left; 
  margin: 5px;
}

input:focus, textarea:focus {
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a" class="block active" ></div>
<div id="b" class="block active2"  ></div>
<div id="c" class="block" ></div>

<div id="keyboard">A</div>
<span class="delete">DEL</span>

Answer 4

Your code has several issues that need to be addressed:

In order to use the .removeClass and .addClass functions, you should have a jQuery object instead of a Node element.
If the first div already contains 4 A, the checka value will remain 4, so it's important to also check if checkb == 0.
Make sure to retrieve the current .active each time instead of just on page load. Placing var $write = $(".active"); inside the click event is necessary.

var a = $("#a"),
    b = $("#b"),
    c = $("#c"),
    $write;

$('#keyboard').click(function(){
  var checka = $('#a').html().length;
  var checkb = $('#b').html().length;

  if (checka === 4 && checkb === 0) {
    a.removeClass("active");
    b.addClass("active");
  }
  else if (checkb === 4) {
    b.removeClass("active");
    c.addClass("active");
  }

  $write = $(".active");

  var $this = $(this),
      character = $this.html();

  $(".active").html($write.html() + character);
});

$('.delete').click(function() {
  var html = $write.html();
  $write.html(html.substr(0, html.length - 1));
  
  if ($write.html().length == 0) {
      $write = $write.prev();
  }
  
  return false;
});

.block {
  background: #fff; 
  color: red; 
  border: 0; 
  width: 45px; 
  height: 20px; 
  padding: 10px; 
  float: left; 
  margin: 5px;
}

input:focus, textarea:focus {
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a" class="block active" ></div>
<div id="b" class="block active2"  ></div>
<div id="c" class="block" ></div>

<div id="keyboard">A</div>
<span class="delete">DEL</span>

Answer 5

Answer №3

Check out this revised code to fix the errors:

var a = $("#a"),
    b = $("#b"),
    c = $("#c");
    var $write = $(".active");

$('#keyboard').click(function(){

  var checka = $('#a').html().length;
  var checkb = $('#b').html().length;

  if (checka === 4) {
    a.removeClass("active");
    b.addClass("active");
    $write = b;
  }
  if (checkb === 4) {
    b.removeClass("active");
    c.addClass("active");
    $write = c;
  }

  var $this = $(this),
      character = $this.html();
  $(".active").html($write.html() + character);


});
$('.delete').click(function() {
    var html = $write.html();
  if (html.length == 0) {
    if ($write.is('#c')) {
        $write.removeClass('active');
        $write = b;
      $write.addClass('active');
    } else if ($write.is('#b')) {
        $write.removeClass('active');
        $write = a;
      $write.addClass('active');
    }
    html = $write.html();
  }
  $write.html(html.substr(0, html.length - 1));
  return false;
});

JSFIDDLE

Answer 6

Check out this revised code to fix the errors:

var a = $("#a"),
    b = $("#b"),
    c = $("#c");
    var $write = $(".active");

$('#keyboard').click(function(){

  var checka = $('#a').html().length;
  var checkb = $('#b').html().length;

  if (checka === 4) {
    a.removeClass("active");
    b.addClass("active");
    $write = b;
  }
  if (checkb === 4) {
    b.removeClass("active");
    c.addClass("active");
    $write = c;
  }

  var $this = $(this),
      character = $this.html();
  $(".active").html($write.html() + character);


});
$('.delete').click(function() {
    var html = $write.html();
  if (html.length == 0) {
    if ($write.is('#c')) {
        $write.removeClass('active');
        $write = b;
      $write.addClass('active');
    } else if ($write.is('#b')) {
        $write.removeClass('active');
        $write = a;
      $write.addClass('active');
    }
    html = $write.html();
  }
  $write.html(html.substr(0, html.length - 1));
  return false;
});

JSFIDDLE

Answer 7

Answer №4

<app-step1 class="star-inserted">
  <div c79="" class="form-group mt-2 star-inserted">
      <ng-otp-input c79="" _nghost-gtc-c25="">
        <input id="" type="text" class="otp-input" c25="" maxlength="1" autocomplete="off" pattern="\d*" charCodeLimit='[48,57]'>
        <input id="" type="text" class="otp-input" c25="" maxlength="1" autocomplete="off" pattern="\d*" charCodeLimit='[48,57]'>
        <input id="" type="text" class="otp-input" c25="" maxlength="1" autocomplete="off" pattern="\d*" charCodeLimit='[48,57]'>
        <input id="" type="text" class="otp-input" c25="" maxlength="1" autocomplete="off" pattern="\d*" charCodeLimit='[48,57]'>
        <input id="" type="text" class="otp-input" c25="" maxlength="1" autocomplete="off" pattern="\d*" charCodeLimit='[48,57]'>
        <input id="" type="text" class="otp-input" c25="" maxlength="1" autocomplete="off" pattern="\d*" charCodeLimit='[48,57]'>
      </ng-otp-input>
    </div>
  </div>
</app-step1>

Moreover, the following functions have been added:

var container = document.getElementsByClassName("star-inserted")[0];
container.onkeyup = function(e) {
  var target = e.srcElement;
  if (target.value.length >= target.maxLength) {
    var next = target;
    while (next = next.nextElementSibling) {
      if (next == null)
        break;
      if (next.tagName.toLowerCase() == "input") {
        next.focus();
        next.setSelectionRange(0, next.value.length);
        break;
      }
    }
  }
}
container.onkeypress = function(e) {
  let charCodeLimit = e.target.getAttribute("charCodeLimit");
  if (charCodeLimit) {
    let limit = JSON.parse(charCodeLimit);
    if(limit.length==2){
      return (e.charCode >= limit[0] && e.charCode <= limit[1]) || e.charCode == 0;
    }
  }
}
container.onclick = function(e) {
  if (e.target.tagName.toLowerCase() == "input") {
    e.target.select();
  }
}

To view an Online Demo for this code snippet, visit: https://jsfiddle.net/nsvbtkzq/

Answer 8

<app-step1 class="star-inserted">
  <div c79="" class="form-group mt-2 star-inserted">
      <ng-otp-input c79="" _nghost-gtc-c25="">
        <input id="" type="text" class="otp-input" c25="" maxlength="1" autocomplete="off" pattern="\d*" charCodeLimit='[48,57]'>
        <input id="" type="text" class="otp-input" c25="" maxlength="1" autocomplete="off" pattern="\d*" charCodeLimit='[48,57]'>
        <input id="" type="text" class="otp-input" c25="" maxlength="1" autocomplete="off" pattern="\d*" charCodeLimit='[48,57]'>
        <input id="" type="text" class="otp-input" c25="" maxlength="1" autocomplete="off" pattern="\d*" charCodeLimit='[48,57]'>
        <input id="" type="text" class="otp-input" c25="" maxlength="1" autocomplete="off" pattern="\d*" charCodeLimit='[48,57]'>
        <input id="" type="text" class="otp-input" c25="" maxlength="1" autocomplete="off" pattern="\d*" charCodeLimit='[48,57]'>
      </ng-otp-input>
    </div>
  </div>
</app-step1>

Moreover, the following functions have been added:

var container = document.getElementsByClassName("star-inserted")[0];
container.onkeyup = function(e) {
  var target = e.srcElement;
  if (target.value.length >= target.maxLength) {
    var next = target;
    while (next = next.nextElementSibling) {
      if (next == null)
        break;
      if (next.tagName.toLowerCase() == "input") {
        next.focus();
        next.setSelectionRange(0, next.value.length);
        break;
      }
    }
  }
}
container.onkeypress = function(e) {
  let charCodeLimit = e.target.getAttribute("charCodeLimit");
  if (charCodeLimit) {
    let limit = JSON.parse(charCodeLimit);
    if(limit.length==2){
      return (e.charCode >= limit[0] && e.charCode <= limit[1]) || e.charCode == 0;
    }
  }
}
container.onclick = function(e) {
  if (e.target.tagName.toLowerCase() == "input") {
    e.target.select();
  }
}

To view an Online Demo for this code snippet, visit: https://jsfiddle.net/nsvbtkzq/

Transfer information to the following section once the current one has been completed - Utilizing JavaScript tabulation

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

the parameter is absent or its value is null for:

Leveraging the power of THREE.js TransformControls

conceal the act of pushing

Difficulty in finding and retrieving array indexes that match a specific character pattern

After the completion of progress, display the POST outcome

Utilizing fibrous in node.js to efficiently fetch data from the request library

Using a Javascript loop to showcase values from a database

Audio file is playing on only one computer and not the other

Adjust the background color of the body content to reflect changing content

Using AngularJS to bind radio buttons to ng-model

When using jQuery's $.ajax function, the success parameter with the textStatus is being disregarded without any indication

Adjust the text within the paragraph dynamically according to the option chosen in the drop-down menu using

Interactive pop-up window featuring conversational chat boxes

Steps to deactivate two choices in a multi-select dropdown menu and visually dim those options

Guide on adding user input values (type=text) into HTML using JavaScript function outcome

Alter the display style of the nearest span using jQuery when the select option is modified

CSS only accordion divs that are all opened by default with no need for jquery

How to change a CSS 'left' property using Jquery or Javascript

Unusual behavior experienced with raycasting in Three JS when objects are are repositioned

The issue with Cordova (PhoneGap) is that when you move a video file captured by the camera, the gallery thumbnail