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

【问题标题】：Backspace inside INPUT element causes fixed position DIV to relocate to cursorINPUT 元素内的退格键导致固定位置 DIV 重新定位到光标
【发布时间】：2012-10-24 14:59:14
【问题描述】：

是的。听起来很奇怪。

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

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

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

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

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

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

值得注意的：

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

想法？

【问题讨论】：

这也发生在 Chrome 23 中 - 我还没有找到解决方案，但这里有一个讨论它的线程：code.google.com/p/chromium/issues/detail?id=139613

标签： html ios cordova input webkit

【解决方案1】：

此解决方法对我有用。

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

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

【讨论】：

这非常有效。我通过 input[type="text"]{} 和 input[type="search"]{} 将它添加到任何基于文本的输入元素中
对我来说，只需使用-webkit-transform: translate3d(0,0,0); 或-webkit-perspective: 1000; 就足够了。

【解决方案2】：

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

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

【讨论】：

【解决方案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;

}

【讨论】：