2

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

谢谢你。

4

1 回答 1

0

重新定位后尝试在元素上调用 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 手。

于 2013-09-04T17:57:35.307 回答