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

To keep the style clean, I would suggest you to create 4 input boxes.

Write a small script to focus the next input box when user enters character in the current input box.

Answer 2

$("input[name*=pin]").keyup(function(e) {
  if($(this).val().length == 1) {
    $(this).attr('type', 'password');
    var input_fields = $(this).closest('form').find('input[name*=pin]');
    input_fields.eq(input_fields.index(this) + 1).focus();
  }
  if (e.keyCode==8 && e.currentTarget.name !== 'pin01') {
    $(this).attr('type', 'number');
    var input_fields = $(this).closest('form').find('input[name*=pin]');
    input_fields.eq( input_fields.index(this) - 1 ).attr('type', 'number').focus(); 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" class="form-pin">
  <input type="number" maxlength="1" name="pin01" class="input-pin" pattern="\d*" />
  <input type="number" maxlength="1" name="pin02" class="input-pin" pattern="\d*" />
  <input type="number" maxlength="1" name="pin03" class="input-pin" pattern="\d*" />
  <input type="number" maxlength="1" name="pin04" class="input-pin" pattern="\d*" />
</form>

Answer 3

Instead of using background-image for this purpose, use four input boxes with their type set to password, and than use jQuery to achieve some more user friendliness, if you don't need that functionality of auto focusing to next field you can simply omit the script out and achieve your style..

Demo

input[type=password] {
    padding: 10px;
    border: 1px solid #ffffd;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 30px;
}

jQuery (Optional for auto focus functionality)

$("input").keyup(function() {
    if($(this).val().length >= 1) {
      var input_flds = $(this).closest('form').find(':input');
      input_flds.eq(input_flds.index(this) + 1).focus();
    }
});

Answer 4

No need for jQuery, much cleaner IMO.

HTML

<form id="ios">
    <input type="password" maxlength="1" />
    <input type="password" maxlength="1"/>
    <input type="password" maxlength="1"/>
    <input type="password" maxlength="1"/>
</form>   

CSS

form#ios input[type=password]{
    height: 50px;
    width: 40px;
    text-align: center;
    font-size: 2em;
    border: 1px solid #000;
} 

Demo

http://jsfiddle.net/jerryhuangme/e9yhr/

Answer 5

Instead of images, have 4 input boxes. Fiddle here: http://jsfiddle.net/JLyn9/2/

<input type="password" maxlength=1 id="1" onkeyup="moveOnMax(this,'a')" />
<input type="password" maxlength=1 id="a" onkeyup="moveOnMax(this,'b')" />
<input type="password" maxlength=1 id="b" onkeyup="moveOnMax(this,'c')" />
<input type="password" maxlength=1 id="c" />

moveOnMax =function (field, nextFieldID) {
    if (field.value.length == 1) {
        document.getElementById(nextFieldID).focus();
    }
}

PS the JS function can be optimized.

EDIT/WARNING: This is not a solution to this problem. Please look at the other answers

Answer 6

 <input type="tel" maxlength="1" tabindex="1" class="display-otp-box" data-key="otp1">
 <input type="tel" maxlength="1" tabindex="2" class="display-otp-box" data-key="otp2">
 <input type="tel" maxlength="1" tabindex="3" class="display-otp-box" data-key="otp3">
 <input type="tel" maxlength="1" tabindex="4" class="display-otp-box" data-key="otp4">


$('.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.