我有一个包含四个数字输入的接口(interface),用于输入引脚。当填充一个输入时,选择下一个输入来给予焦点。
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 上看到它。它可能在其他版本上也有,但这些是我目前可用的所有测试设备。有人以前见过类似的情况吗?如果有的话有解决方法吗?
任何想法都非常感谢
最佳答案
好的,我找到了解决方案。
鉴于我能够在 jsfiddle 中轻松生成此内容,我知道这与我使用的 js 框架(mithril)无关,而是浏览器特定的问题。由于 safari 运行与 chrome 不同的引擎,我认为选择输入框来改变焦点的方式是可能的原因。我没有深入研究这个问题,但使用 element.focus() 方法代替 select 解决了我的问题,并且没有其他跨浏览器问题。如果有人有更深入的解释,我很想听听:)谢谢,
关于javascript - IOS Safari 上 HTML 输入的奇怪行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33081613/