CSS：创建iOS样式的密码密码框 [英] CSS: Create iOS style Pin Password box

问题描述

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

I want to create a html5 input that looks like the iOS enter Pin (on the lock screen).... with 4 input boxes.

我该怎么办

我尝试了以下操作：

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

1) Created a normal input box.

2）删除边框。

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

3) Placed the above image as the background of the input box.

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

4) And added some letter spacing.

问题是：当我键入前三个字符时，它适合放在框中：

Problem is: As i type the first 3 characters, it fits in the boxes:

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

But when i type the 4th character, the characters move towards the left and hence it appears as below:

我该怎么办要解决此问题？

What can I do to fix this ?

还有其他更好的方法吗？

Any other better approach ??

编辑：

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

Ok based on the below answers, I modified the approach to have 4 input boxes. And on keyup event for each input box, I change the focus to next input box.

这在浏览器上效果很好。但不适用于该设备（iPhone 5）。是什么问题？

This works well on browser. But does not work on the device (iPhone 5). What is the problem ?

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

It is a Sencha Touch app packaged using Cordova.

已解决：

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

推荐答案

有四个输入框而不是图像。在这里提琴： http://jsfiddle.net/JLyn9/2/

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可以优化JS功能。

PS the JS function can be optimized.

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

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

这篇关于CSS：创建iOS样式的密码密码框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！