Question

呀。听起来很奇怪。

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

使用案例 用户将文本数据键入INPUT元素，该元素跨越INPUT元素的可见宽度，并且必须退格以纠正键入时的错误。

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

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

这是一个屏幕：（抱歉堆栈不允许我发布imgs） issue screenshot

有人有什么想法吗？如果你需要HTML和/或CSS的特定部分来呈现这个，请告诉我，我会尽快发布。

值得注意的是：

输入元素已重新换肤。
输入元素的“-webkit-appearance”属性设置为“none”。
此问题在所有输入元素（类型=文本，搜索，数字，电话或电子邮件）中都是一致的，即使是不同形式/屏幕/页面的输入元素也是如此。我推测这个属性与它有关 - 但我无法想象是什么。我过去曾经使用过这个属性，没有问题。
只要在input元素中删除的字符不在元素的可见边界之外，退格事件就会按预期运行。
网站中还有其他固定位置的DIV元素，但只有topnavbar / header正在重新定位。

想法？

Answer 1

此解决方法适用于我。

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

-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform-style: flat;

Answer 2

你可以使用Jquery通过每次按下退格时隐藏标题来绕过它，然后再次显示它。

$('#input_field').keyup(function(e) {
  if (e.keyCode === 8) {
    return $('#header').hide(0, function() {
      return $(this).show();
    });
  }
});

Answer 3

我的团队在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;

}

INPUT元素内的退格键导致固定位置DIV重定位到光标

3 个答案: