javascript - IOS Safari上HTML输入的奇怪行为

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

的HTML：

    <div class="pinInputs">
    <div class="pinInputsWrapper">
        <div class="small-2 large-2 columns">
            <input name="pinInput1"
                   id="pinInput1"
                   tabindex="1"
                   maxlength="1"
                   pattern="[0-9]"
                   autofocus="true"
                   data-autofocus="true"
                   type="tel" />
        </div>
        <div class="small-2 large-2 columns">
            <input name="pinInput2"
                   id="pinInput2"
                   tabindex="2"
                   maxlength="1"
                   pattern="[0-9]"
                   type="tel" />
        </div>
        <div class="small-2 large-2 columns">
            <input name="pinInput3"
                   id="pinInput3"
                   tabindex="3"
                   maxlength="1"
                   pattern="[0-9]"
                   type="tel" />
        </div>
        <div class="small-2 large-2 columns">
            <input name="pinInput4"
                   id="pinInput4"
                   tabindex="4"
                   maxlength="1"
                   pattern="[0-9]"
                   type="tel" />
        </div>
    </div>
</div>

CSS：

    .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;
}

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();
        }
    });

我在jsfiddle中创建了它：
https://jsfiddle.net/ek7rhgsj/8/

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

任何想法表示赞赏
C

最佳答案

好的，我找到了解决方案。

鉴于我能够在jsfiddle中轻松生成此代码，所以我知道这与我使用的js框架（mithril）没有任何关系，而是与浏览器相关的问题。由于Safari浏览器使用的是与Chrome不同的引擎，因此我认为可能是因为选择输入框以更改焦点的方式。我没有对此进行深入研究，但是使用element.focus（）方法代替select为我解决了这个问题，并且没有其他跨浏览器问题。如果有人对它的解释更深一点，我很想听听:)

谢谢，
C