CSS：创建iOS样式Pin密码框

Question

我想创建一个html5输入，看起来像iOS输入Pin（在锁定屏幕上）....带有4个输入框。

我如何实现这一目标？

我尝试了以下内容：

1）创建一个普通的输入框。

2）删除了它的边框。

3）将上面的图像作为输入框的背景放置。

4）并添加了一些字母间距。

问题是：当我输入前3个字符时，它适合框：

但是当我键入第4个字符时，字符向左移动，因此它显示如下：

我该怎么做才能解决这个问题？

还有其他更好的方法吗？

修改

根据以下答案，我修改了方法，有4个输入框。在每个输入框的 keyup 事件中，我将焦点更改为下一个输入框。

这适用于浏览器。但无法在设备上运行（iPhone 5）。有什么问题？

这是使用Cordova打包的Sencha Touch应用程序。

解决：

需要停用<preference name="KeyboardDisplayRequiresUserAction" value="false" />

Answer 1

取代图像，有4个输入框。在这里小提琴：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可以优化JS功能。

编辑/警告：这不是解决此问题的方法。请看其他答案

Answer 2

不需要jQuery，更清洁的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;
} 

演示

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

Answer 3

不是使用background-image来实现此目的，而是使用四个input框，并将type设置为密码，而不是使用jQuery来实现更好的用户友好性，如果不这样做需要自动聚焦到下一个领域的功能，你可以简单地省略脚本并实现你的风格..

Demo

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

jQuery（自动对焦功能可选）

$("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

为了保持风格清洁， 我建议你创建4个input框。

当用户在当前输入框中输入字符时，编写一个小脚本来聚焦下一个输入框。

Answer 5

$("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 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, will move to the previous box */ 
  if( key === 8 || key === 46 ){
     $(this).prev('input').focus();
     return;
  }
  $(this).next('input').focus();
 });

• 类型=＆＃34;电话＆＃34;输入时将确保在手机上使用时出现数字小键盘
• 下一个输入将在tabindex的帮助下自动聚焦。