Move the focus to the previous input field by removing the key

Question

Move the focus to the previous input field by removing the key

I have created a phone number input with 10 fields that automatically skip to the next field when you fill in each number.

However, I would like to be able to go back to the previous field if I make a mistake and need to delete a digit. How can I achieve this functionality?

You can view my CodePen project here: http://codepen.io/Steve-Jones/pen/qdMjWb/

Here is the HTML code:

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<body>
  <div class="phone-field"> 
    (<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5" autofocus="autofocus">
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">)
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> -
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">
    <input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">
</body>

This is the CSS code:

.phone-field {
  margin: 50px;
  font-size: 20px;
}

.phone-input {
  width: 13px;
  text-align: center;
  font-size: 16px !important;
  height: 1.75em;
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 2px solid #ddd;
  margin-right: 2px;
  margin-left: 2px;
}

[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.5s 0.0s ease;
  opacity: 0;
}

And finally, here is the jQuery code:

$(document).ready(function(){
  $('body').on('keyup', 'input.phone-input', function(){
    if($(this).val().length === this.size){
      var inputs = $('input.phone-input');
      inputs.eq(inputs.index(this) + 1).focus();
    }
  });
});

javascript jquery html css input

Answer 1

Answer №1

Unlocking the potential with key codes: View on CodePen

$(document).ready(function(){

    $('body').on('keyup', 'input.phone-input', function()
    {
      var key = event.keyCode || event.charCode;
      var inputs = $('input.phone-input');
      if(($(this).val().length === this.size) && key != 32)
      {
        inputs.eq(inputs.index(this) + 1).focus();  
      } 
      if( key == 8 || key == 46 )
      {
        var indexNum = inputs.index(this);
        if(indexNum != 0)
        {
        inputs.eq(inputs.index(this) - 1).val('').focus();
        }
      }

    });
  });

Upon reviewing your code, I noticed that pressing the space bar moves the cursor to the next index. To address this, I believe this solution is appropriate.

KeyCodes Used:

Backspace = 8

Delete = 46

Space Bar = 32

Answer 2

Unlocking the potential with key codes: View on CodePen

$(document).ready(function(){

    $('body').on('keyup', 'input.phone-input', function()
    {
      var key = event.keyCode || event.charCode;
      var inputs = $('input.phone-input');
      if(($(this).val().length === this.size) && key != 32)
      {
        inputs.eq(inputs.index(this) + 1).focus();  
      } 
      if( key == 8 || key == 46 )
      {
        var indexNum = inputs.index(this);
        if(indexNum != 0)
        {
        inputs.eq(inputs.index(this) - 1).val('').focus();
        }
      }

    });
  });

Upon reviewing your code, I noticed that pressing the space bar moves the cursor to the next index. To address this, I believe this solution is appropriate.

KeyCodes Used:

Backspace = 8

Delete = 46

Space Bar = 32

Answer 3

Answer №2

Check out this code snippet on moving backwards with the backspace key

Instead of moving forward, focus on moving backward when the backspace key is detected.

  if(e.keyCode == 8){
    var index = inputs.index(this);
    if (index != 0)
        inputs.eq(index - 1).val('').focus();    
  }

Answer 4

Check out this code snippet on moving backwards with the backspace key

Instead of moving forward, focus on moving backward when the backspace key is detected.

  if(e.keyCode == 8){
    var index = inputs.index(this);
    if (index != 0)
        inputs.eq(index - 1).val('').focus();    
  }

Answer 5

Answer №3

To ensure the key event is delete and then focus before element, make sure to update your javascript file as shown below for successful implementation:

$(document).ready(function(){
    $('body').on('keyup', 'input.phone-input', function(e){
      if($(this).val().length === this.size){
        var inputs = $('input.phone-input');
        inputs.eq(inputs.index(this) + 1).focus();
      }
      if(e.keyCode == 8 || e.keyCode == 46){
        var inputs = $('input.phone-input');
        inputs.eq(inputs.index(this) - 1).focus();
      }
    });  
  });

Answer 6

To ensure the key event is delete and then focus before element, make sure to update your javascript file as shown below for successful implementation:

$(document).ready(function(){
    $('body').on('keyup', 'input.phone-input', function(e){
      if($(this).val().length === this.size){
        var inputs = $('input.phone-input');
        inputs.eq(inputs.index(this) + 1).focus();
      }
      if(e.keyCode == 8 || e.keyCode == 46){
        var inputs = $('input.phone-input');
        inputs.eq(inputs.index(this) - 1).focus();
      }
    });  
  });

Move the focus to the previous input field by removing the key

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble locating specific elements on Yahoo News with Selenium in Python?

What is the recommended lifecycle hook in Vue.js2 to execute a function when the page is loaded?

Add the file retrieved from Firestore to an array using JavaScript

Unrecognized files located within the same directory

Using RabbitMQ in a Node.js application to illustrate an example of header exchange

How to effectively use the LIKE statement in mysql with node.js

Determine the number of network requests being made on a webpage

Ways to modify the color of mat-icon within an input field using Angular 6

Determine if an HTML element contains a specific class using JavaScript

Swapping images when hovering over a list item or anchor tag

Removing element from database using php/ajax

Font Awesome icons occasionally display as squares, but typically they render correctly

Creating a stylish horizontal divider with circular accents at either end

The jQuery Deferred feature on Ajax is failing to properly pass the array in the data option as an array, instead converting

The jQuery resize() method seems to be malfunctioning

Effortlessly move and rearrange various rows within an HTML table by utilizing JQuery alongside the <thead> elements

Uncertainty surrounding the extent of a button's scope within an Angular application

I'm struggling to locate the space that should be between these elements

What is the best way to synchronize the image dimensions and source when dynamically loading images?

The concept of Ajax and checkbox arrays