Html 输入元素内部的退格导致固定位置DIV重新定位到光标

嗯。听起来很奇怪

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

用例： 用户在输入元素中键入的文本数据超出了输入元素的可见宽度，并且必须退格以更正键入错误

期望值： 最后一个字符被删除

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

这里有一个屏幕：（很抱歉stack还不让我发布IMG）

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

值得注意的是：

• 输入元素已重新蒙皮
• 输入元素的“-webkit外观”属性设置为“无”
• 此问题在所有输入元素（类型=文本、搜索、号码、电话或电子邮件）中都是一致的，即使是不同形式/屏幕/页面的输入元素。我推测这项财产与此有关，但我无法想象会发生什么。我过去使用过这个属性，没有任何问题
• 只要输入元素中被删除的字符不超出元素的可见边界，退格事件就会按预期运行
• 站点中还有其他固定位置DIV元素，但只有topnavbar/标题正在重新定位

---

想法？

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

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

css

---

}

您可以使用Jquery绕过此问题，每次按下退格键时隐藏标题，然后立即再次显示标题

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

---

这个变通方法对我很有效

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

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

---

Chrome23中也会出现这种情况——我还没有找到解决方案，但这里有一个帖子在讨论它：这非常有效。我通过输入[type=“text”]{}和输入[type=“search”]{}将它添加到任何基于文本的输入元素中，只需使用

-webkit transform:translate3d（0,0,0）

或

-webkit透视图：1000已足够。
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform-style: flat;