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 configuring webpack for CSS Modules? You may be dealing with an invalid configuration object

What could be the source of this margin or spacing?

Is it possible for a Django view to send JSON data back upon a successful Ajax request?

Problem with jQuery image gallery

Load a webpage using javascript while verifying permissions with custom headers

If the div element undergoes a change, use an if-else condition to populate the data fields accordingly

Transforming a high chart into an image and transmitting it to the server through an ajax request

Changes in a portion of the state for Vaadin's AbstractJavascriptComponent

Implementing Event Listeners in Vue 3.0: A Guide to Attaching to the Parent Element

Substitute numerical strings with actual numbers within an array

Issue with the flexbox div not fully occupying the vertical space

The compatibility between Polymer JS and Rails Turbolinks is problematic

`The Art of Binding() with Objects Created on the Fly`

Using Javascript to open a PDF in a new tab directly from a byte array

Designing a dropdown menu within displaytag

How can I make the Struts2 iterator function correctly?

Issue with React Hot Toast not displaying properly due to being positioned behind the <dialog>

Struggling to retrieve JSON data from the MercadoLibre API while consistently encountering the CORS error?

Guidelines for displaying user profile information in the dashboard page through an Angular project, considering the different user types (user, super user, admin)

tips for linking my webpage with the database