使用 iScroll 会阻止键盘在我的设备上显示答案

【问题标题】：Using iScroll prevents the keyboard from showing on my device使用 iScroll 会阻止键盘在我的设备上显示
【发布时间】：2011-11-28 19:28:57
【问题描述】：

我使用 iScroll 来提供 iPhone 风格的滚动。但是，当点击文本框时，键盘不显示。

在尝试查找可能的原因时，我发现删除 iScroll 脚本使其正常工作，但在这种情况下我错过了滚动功能。

这是 iScroll 中的错误吗？如果是，是否有经过测试的解决方法？或者 iScroll 有什么替代品吗？

提前致谢。

【问题讨论】：

标签： android iphone mobile-webkit iscroll4 webkit-transform

【解决方案1】：

我相信这个解决方案是最佳的调整iscroll.js中的代码，（如下）

onBeforeScrollStart: function (e) { 
                //e.preventDefault();
                if (e.target.nodeName.toLowerCase() == "select" || e.target.tagName.toLowerCase() == 'input' || e.target.tagName.toLowerCase() == 'textarea'){             
                    return;
                    } 
            },

【讨论】：

【解决方案2】：

我在iScroll 4.2的_start中添加了如下代码来解决这个问题：

  if (e && e.target && e.target.tagName) {
    var bFocusField = ('|INPUT|TEXTAREA|BUTTON|SELECT|'
                         .indexOf('|' + e.target.tagName + '|') >= 0);
    if (bFocusField || that.focusField) {
      if (bFocusField) {
        that.focusField = e.target;
      } else {
        that.focusField.blur();
        that.focusField = null;
      }
      e.defaultPrevented = false;
      e.returnValue = true;
      return true;
    }
  }

代码插入函数的初始化部分下方（that.moved = false; ... that.dirY = 0;）。

在 iPad 1 (iOS 5.1) 和 iPad 3 (iOS 6) 上进行了测试。屏幕键盘似乎不会干扰 iScroll（我每 5 秒执行一次 iScroll.refresh()）。

【讨论】：

【解决方案3】：

至少在 iScroll 4 中，您可以添加此代码以启用单击输入字段。请参阅示例文件夹中有关表单字段的演示。

<script type="text/javascript">

var myScroll;
function loaded() {
    myScroll = new iScroll('wrapper', {
        useTransform: false,
        onBeforeScrollStart: function (e) {
            var target = e.target;
            while (target.nodeType != 1) target = target.parentNode;

            if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
                e.preventDefault();
        }
    });
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);

</script>

【讨论】：

我注意到上面的解决方案在具有中等或非常复杂的 html 的页面上使性能非常糟糕。我还没有找到解决方案，但会尝试下面的 OP 建议。
禁用 CSS 并没有解决它，它只是让它根本无法滚动。所以问题肯定出在 iScroll 上。这是一个关于它的线程：code.google.com/p/iscroll-js/issues/detail?id=17

【解决方案4】：

我能够解决错误。问题出在 CSS 上。

我认为可能是 CSS 以某种方式造成了问题。我得出这个结论的基础是，当我评论 wrapper 和 scroller 的 CSS 时，键盘出现了……但是保留它们，键盘不起作用。我正在使用bottom: 0px;，这似乎以某种方式阻止了键盘显示。

删除bottom: 0px; 解决了我的问题。

希望这对其他人有所帮助。

【讨论】：