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

$("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(); 
  }
});