聚焦移动的元素以半聚焦元素结束答案

【问题标题】：Focusing moved element ends up with half-focused element聚焦移动的元素以半聚焦元素结束
【发布时间】：2013-09-04 16:51:03
【问题描述】：

我正在使用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 版本中的已知错误吗？任何人都可以提出任何明智的解决方法吗？我一直在努力解决这个问题太久了。

谢谢。

【问题讨论】：

做了更多测试。适用于三星 S4 (4.2.2) 的“Internet”，但不适用于 PhoneGap。在浏览器和 PhoneGap 应用程序中使用 LG Optimus G (Android 4.0.4)。
如果我在焦点上添加负边距而不是绝对定位，效果相同。

标签： javascript android css cordova webkit

【解决方案1】：

尝试在重新定位后在元素上调用 focus()，尝试在超时后执行此操作（100-300 毫秒工作不一致）。尝试了大约 50 种其他方法。

我最终通过在 1 毫秒超时后执行定位来“修复”它（我非常宽松地使用该术语）。我的 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 手。

【讨论】：