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功能.

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