Question

我正在使用cordova / phonegap开发一个应用程序。在我的登录页面上，表单靠近屏幕底部。当用户聚焦元素时，我将表单移动到屏幕顶部，否则它会在键盘下方结束。

这是我的问题开始的地方。

在我的Galaxy Nexus（4.2.2）上使用已编译的APK或使用“浏览器”应用程序直接访问该页面时，它表现出完全古怪的行为。

点击表单元素后，表单向上移动，键盘弹出......表单元素以一些奇怪的半聚焦状态结束。我通常可以输入它，但不显示光标或选择轮廓，并且按退格键不会删除字符。其他时候我可以输入并键入...某处，但输入框中没有任何内容。

同样的页面在iOS 7上的Safari和桌面上的Chrome中运行良好。该页面适用于Android上的Chrome浏览器。

标记：

<div class="form">
    <input type="text" placeholder="focus me">
</div>

CSS：

.form {
    position: absolute;
    bottom: 15%;
    left: 15%;
    width: 70%;
}

input {
    display: block;
    width: 100%;
}

Javascript（使用jQuery 2.0.3）：

$(".form input").focus(function() {
    $(".form").css({'bottom':'', 'top':'15%'});
});

$(".form input").blur(function() {
    $(".form").css({'bottom':'15%', 'top':''});
});

http://jsfiddle.net/BPqGJ/

有谁知道可能导致这种情况的原因是什么？这是旧Webkit构建中的已知错误吗？任何人都可以建议任何明智的解决方法吗？我长期以来一直在反对这个问题。

谢谢。

Answer 1

重新定位后尝试在元素上调用focus（），尝试在超时后执行它（100-300 ms工作不一致）。尝试了大约50件事。

我最终通过在1ms超时后执行定位来“修复”它（我使用非常松散的术语）。我的Javascript最终结束了：

$(".form input").focus(function() {
    setTimeout(function() {
        $(".form").css({'bottom':'', 'top':'15%'});
    }, 1);
});

$(".form input").blur(function() {
    setTimeout(function() {
        $(".form").css({'bottom':'15%', 'top':''});
    }, 1);
});

所有奇怪的行为都消失了。我应该包括一个警告，虽然我有理论，但我根本不知道为什么这样做。如果有人知道针对Webkit的相关错误或对此问题的一些真实解释，我当然仍然有兴趣听到它。

YMMV HTH HAND。

聚焦移动元素以半聚焦元素结束

1 个答案: