CSS：创建 iOS 风格的 Pin 密码框

Question

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

我如何做到这一点？

我尝试了以下方法：

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

2) 移除了它的边框。

3) 将上图作为输入框的背景。

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

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

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

我能做些什么来解决这个问题？

还有其他更好的方法吗？？

编辑：

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

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

这是一个使用 Cordova 打包的 Sencha Touch 应用。

已解决：

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

Answer 1

 <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" 将确保在手机上使用时出现数字小键盘
• 下一个输入将在 tabindex 的帮助下自动聚焦。

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

有 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 4

不需要 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 5

不要为此使用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 6

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

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