Javascript IOS Safari上HTML输入的奇怪行为

我有一个四个数字输入的接口，用于pin输入。填充输入时，选择下一个以提供焦点

html:

Javascript:

    $("input").bind("input change", function(ev) {
        var index = parseInt(ev.srcElement.id.slice(-1));
        if (index < 4 && ev.srcElement.value) {
            $('#pinInput' + (index+1)).select();
        }
    });

$（“输入”）.bind（“输入更改”，函数（ev）{
var index=parseInt（ev.srcielement.id.slice（-1））；
if（索引<4&&ev.srcement.value）{
$（'#pinInput'+（index+1））.select（）；
}
});

我在这个JSFIDLE中创建了它：

复制该问题： 使用一位数数字字符填充输入，然后返回并删除内容。当所有输入为空时，重新填充。光盘现在被推到输入的底部，而不是垂直对齐。这只能在移动safari上复制。我可以在运行ios 8.1.1、ios 8.2和ios 9的iPhone上看到它。其他版本可能也有，但这些都是我目前可用的测试设备。以前有没有人见过类似的情况？如果有，是否有解决办法

有什么好主意吗

---

好的，我找到了解决办法

考虑到我能够在JSFIDLE中轻松地实现这一点，我知道这与我正在使用的js框架（mithril）无关，而是一个特定于浏览器的问题。由于safari运行的引擎与chrome不同，我认为选择输入框来改变焦点的方式是可能的原因。我没有深入研究这个问题，但使用element.focus（）方法代替select为我解决了这个问题，没有其他跨浏览器问题。如果有人有更深层次的解释，我很乐意听到：）

谢谢，

---

好的，我找到了解决办法

考虑到我能够在JSFIDLE中轻松地实现这一点，我知道这与我正在使用的js框架（mithril）无关，而是一个特定于浏览器的问题。由于safari运行的引擎与chrome不同，我认为选择输入框来改变焦点的方式是可能的原因。我没有深入研究这个问题，但使用element.focus（）方法代替select为我解决了这个问题，没有其他跨浏览器问题。如果有人有更深层次的解释，我很乐意听到：）

谢谢， C

    .pinInputs {
    max-width: 16.4em;
    margin: 0 auto;
}
.pinInputsWrapper {
    height: 3.2em;
}
.columns {
    margin: 0 2.5%;
    float:left;
    width:20%;
    height:100%;
}

input {
    font-size: 1.5em;
    color: #024734;
    text-align: center;
    margin-bottom: 0;
    height: 100%;
    padding: 0;
    width: 100%;
}

input:not(:focus){
    -webkit-text-security: disc;
    -mox-text-security: disc;
    -moz-text-security: disc;
    -o-text-security: disc;
    text-security: disc;
    color: #31953e;
}

    $("input").bind("input change", function(ev) {
        var index = parseInt(ev.srcElement.id.slice(-1));
        if (index < 4 && ev.srcElement.value) {
            $('#pinInput' + (index+1)).select();
        }
    });