CSS: Create iOS style Pin Password box

Question

I want to create a html5 input that looks like the iOS enter Pin (on the lock screen).... with 4 input boxes.

How do i achieve this?

Answer 1

 
 
 
 


$('.display-otp-box').on('keyup', function (e) {
  var key = event.keyCode || event.charCode;
        
  /* for backspace, focus will move to the previous box */ 
  if( key === 8 || key === 46 ){
     $(this).prev('input').focus();
     return;
  }
  $(this).next('input').focus();
 });

• type="tel" on the input will make sure the numeric keypad appears when using on the phone
• next input will be focused automatically with the help of tabindex.