IOS Safari 上 HTML 输入的奇怪行为答案

【问题标题】：Strange behaviour on HTML inputs on IOS SafariIOS Safari 上 HTML 输入的奇怪行为
【发布时间】：2015-10-13 01:38:30
【问题描述】：

我有一个用于输入引脚的四个数字输入接口。当一个输入被填充时，下一个被选择来给予焦点。

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/

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

非常感谢任何想法 C

【问题讨论】：

标签： javascript ios css html safari

【解决方案1】：

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

鉴于我能够在 jsfiddle 中轻松生成它，我知道这与我使用的 js 框架（秘银）无关，而是特定于浏览器的问题。由于 safari 运行与 chrome 不同的引擎，我认为选择输入框以更改焦点的方式是可能的原因。我没有深入研究这一点，但使用 element.focus() 方法代替 select 为我解决了这个问题，并且没有其他跨浏览器问题。如果有人有更深入的解释，我很乐意听到:)

谢谢， C

【讨论】：