3

是的。听起来怪怪的。

我有一个在 iOS6 (iPhone5) 上运行的 PhoneGap 2.1.0 应用程序，不幸的是我无法在另一台设备上进行测试（我回家后会检查模拟器）。

用例： 用户将文本数据键入到 INPUT 元素中，该元素跨越了 INPUT 元素的可见宽度，并且必须退格以更正键入错误。

预期： 最后一个字符被删除。

实际： 删除最后一个字符，并且仅当删除的文本超出 INPUT 元素的可见边界时，“位置：固定；” 应用程序标头重新定位到文本输入光标的位置。

这是一个屏幕：（抱歉堆栈不允许我发布 imgs） 问题截图

有人有想法么？如果您需要呈现此内容的 HTML 和/或 CSS 的特定部分，请告诉我，我会尽快发布。

值得注意的是：

  • 输入元素已重新蒙皮。
  • 输入元素的“-webkit-appearance”属性设置为“none”。
  • 这个问题在所有输入元素（类型=文本、搜索、数字、电话或电子邮件）中都是一致的，甚至在不同的表单/屏幕/页面中也是如此。我推测这个属性与它有关 - 但我无法想象是什么。我过去使用过这个属性，没有问题。
  • 只要输入元素中被删除的字符不超出元素的可见边界，退格事件就会按预期运行。
  • 站点中还有其他固定位置的 DIV 元素，但只有顶部导航栏/标题正在重新定位。

想法？

4

3 回答 3

4

这种解决方法对我有用。

将这些添加到受影响的输入：

-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform-style: flat;
于 2012-12-27T03:51:52.830 回答
3

您可以使用 Jquery 来规避此问题，方法是每次按下退格键时隐藏标题，然后再次显示它。

$('#input_field').keyup(function(e) {
  if (e.keyCode === 8) {
    return $('#header').hide(0, function() {
      return $(this).show();
    });
  }
});
于 2012-11-26T15:03:51.697 回答
1

我的团队在 IOS6 + 固定标题移动中遇到了类似的退格问题。我们找不到真正的解决方案，但作为一种解决方法，我们使用modernizr 来测试溢出内容滚动并将绝对位置应用于标题，同时将滚动应用于应用页面div。

    Modernizr.addTest('overflowscrolling', function(){
            return Modernizr.testAllProps("overflowScrolling");
    });

css

.overflowscrolling .app-header {
   position: absolute;  
}

.overflowscrolling #app-page {
overflow: scroll;
position:absolute;
top:0px; 
bottom: 0px;
left: 0px;
right: 0px;
-webkit-overflow-scrolling: touch;

}

于 2012-11-01T15:55:55.690 回答