使用isscroll可以防止键盘显示在我的设备上

Question

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

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

这是isroll的一个bug吗?如果是，是否有经过测试的解决方案?或者是否有isscroll的替代方案?

Answer 1

至少在isroll 4中，您可以添加此代码以启用单击输入字段。参见examples文件夹中关于表单字段的演示。

<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>

Answer 2

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

我想可能是CSS在某种程度上造成了这个问题。我的结论是，当我为wrapper和scroller注释CSS时，键盘出现了……但是留着它们，键盘就坏了。我正在使用bottom: 0px;，这似乎以某种方式阻止键盘显示。

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

希望对大家有所帮助

Answer 3

我在isroll 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;
    }
  }

代码插入到函数初始化部分的下面(即。移动= false;…那

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

Answer 4

我相信这个解决方案是最优的调整isscroll .js中的代码，(如下所示)

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