使用iScroll会防止设备上的键盘弹出。

Question

我正在使用iScroll提供iPhone风格的滚动效果。但是，当点击文本框时，键盘不会弹出。

在尝试找到可能的原因时，我发现删除iScroll脚本可以使其正常工作，但在这种情况下，我会失去滚动功能。

这是iScroll的一个bug吗？如果是，有没有经过测试的解决方法？或者是否有iScroll的替代品？

提前感谢。

- Mahendra Liya

Answer 1

至少在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>

- Niclas

---

我注意到上面的解决方案在具有中等或非常复杂的HTML页面上会导致性能非常差。我还没有找到解决方案，但会尝试下面OP建议的方法。 - Niclas

禁用CSS并没有解决问题，它只是使滚动变得不可能。因此，问题肯定出在iScroll上。这里有一个关于它的线程：http://code.google.com/p/iscroll-js/issues/detail?id=17 - Niclas

Answer 2

我成功解决了这个错误。问题出在CSS上。

我认为可能是CSS在某种程度上导致了问题。我得出这个结论的依据是，当我注释掉wrapper和scroller的CSS时，键盘弹出了...但是如果保留它们，键盘就不起作用。我使用了bottom: 0px;，似乎阻止了键盘的显示。

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

希望这能帮助其他人。

- Mahendra Liya

Answer 3

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

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

- Paulo Almeida

Answer 4

我在 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()）。

- Berend Engelbrecht