移动 Safari - 输入插入符号不会随着溢出滚动一起滚动：触摸

Question

我知道 Mobile Safari 在“动量”(-webkit-overflow-scrolling: touch;) 滚动时不会触发事件。但这并不完全一样，因为 Safari 在内部处理输入的（闪烁的）插入符号。

<div id="container">
    <input type="text" />
    <div class="filling"></div>
</div>

#container {
    position: absolute;
    top: 20px;
    bottom: 20px;
    width: 50%;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    border: 1px solid black;
}

input {
    margin-top: 60vh;
}

.filling {
    height: 200vh;
}

在您的设备上试试这个小提琴（聚焦输入然后滚动）：https://jsfiddle.net/gabrielmaldi/n5pgedzv

当您按住手指时也会出现此问题（即不仅在给它动力和释放时）：插入符号无法滚动。

显然我不想关闭溢出滚动，如果没有办法修复插入符号使其正确滚动，隐藏它就可以了。

谢谢

Answer 1

这确实是一个 WebKit 错误，似乎没有已知的解决方法。

@cvrebert filed 错误：

• WebKit：https://bugs.webkit.org/show_bug.cgi?id=138201
• 苹果雷达：http://openradar.appspot.com/18819624

Answer 2

遇到同样的问题，我的解决方法是在

-webkit-overflow-scrolling: touch

和

-webkit-overflow-scrolling: auto

每当我关注/模糊输入时

Answer 3

这确实是新发布的 iOS 11 的一个 bug。我通过更改 css 解决了 modal 的问题：

.modal {
  position:fixed;
  overflow-y: scroll;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
}

body {
  height: 100%;
  width:100%;
  overflow: hidden;
  position:fixed;
}

Answer 4

我只找到了一种解决方法 - 在滚动事件上检查是否聚焦文本类型的输入，将焦点设置在其他一些元素上（例如，在按钮上）。结果，虚拟键盘和光标将消失。这个解决方案并不完美，但它看起来不像表单顶部的光标那么可怕。 示例：

$(".scrollContainer").scroll(function () {
  var selected = $("input[type='text']:focus");
  if (selected.length > 0) {
      $('#someButton').focus();
  }
}

Answer 5

我花了很多时间试图弄清楚这一点，但这里提到的其他想法都没有成功。

我注意到的一件事是，即使光标会浮动在输入之外，但一旦您开始在屏幕键盘上输入，光标确实会回到正确的位置。

这给了我一个想法——也许通过使用一些 JS 代码，我可以更改输入的值，然后快速将其更改回当前值。也许这会让光标像手动输入时一样对齐。

我测试了它并且它工作。代码如下所示：

       myIScroll.scrollToElement(element, scrollTime); // any scroll method call
       var scrollTime = 400;
       if (element.type && element.type == 'text') {
          var currentValue = $(element).val();
          $timeout(function(){
            $(element).val(currentValue + 'a').val(currentValue);
          }, scrollTime);
        }

Answer 6

您可以通过删除选择并重新设置来解决问题。在这里使用 jQuery 是 Javascript 这样做的。我在进入编辑模式时添加了事件处理程序：

        $(document).on('scroll.inline-edit', function(event) {
            var selection = window.getSelection();
            if (selection.rangeCount) {
                var range = selection.getRangeAt(0);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        });

当我退出编辑模式时，我删除了事件处理程序：

        $(document).off('scroll.inline-edit');

如果始终启用事件处理程序，这也可能会起作用。

Answer 7

我正在使用 jQuery.animate 滚动窗口，如果您不使用 jQuery.animate，我不确定这是否可行，但它对我有用。我只是在元素上触发“模糊”处理程序，这实际上不会导致元素失去焦点，它只是触发处理程序，就好像它们是由用户交互自然触发的一样。看来：

$content.animate(
    {
        scrollTop: $(this).data('originalTop')
    }, 
    {
        duration: 100,
        easing: 'swing',
        always: function(){
            var $t = $(this);
            $t.trigger('blur');
        }
    }
);

由于 iOS 的其他奇怪之处，我必须在我的表单加载时将元素的 offset().top 值保存为 originalTop。 $content 只是一个包含我的表单的可滚动 div - 例如：$('div#content')。

Answer 8

这似乎仍然困扰着 iOS 中的 webkit 表单 -webkit-overflow-scrolling:touch，也在 iOS 11 中。基于上面的答案，并且因为它需要关注 input 或 textearea 元素才能使插入符号显得不合适，这是我自己的“纠正”方法

$('input').on("focus", function(){
    var scrollTopVal =  $(elementSelector).scrollTop();
    $(elementSelector).scrollTop(scrollTopVal + 1);
    $(elementSelector).scrollTop(scrollTopVal);
})

其中elementSelector 指向输入元素的容器元素。

Answer 9

这是不久前的事情，我认为它已在 IOS11.x 上修复，当然我们仍然需要支持旧版本，上面的建议给了我一个提示，但它们都没有工作 4 我的设置。我使用 onFocus 触发了一个延迟函数，该函数向当前焦点字段添加/删除一个字符。我正在使用平面 angularJS/iOS 混合。

在我的 html 方面

... setting up my form
<div ng-repeat="item in curReading.items"  >
      <label>{{item.lbl}}</label>
      <input type="text"
       ng-model="item.value"
       class="form-control"   
       onFocus="if(tweak4IOS == 1) setTimeout(pirouette_4_IOS, 1000);"
           placeholder="Enter Title"
          />
   </div>

在我的 JS 端，相关代码是

function pirouette_4_IOS()
{
  try
  {

    document.activeElement.value += 'x';
    document.activeElement.value = document.activeElement.value.slice(0,-1);
  }
  catch(err)
  {
    alert(err.message);
  }
  finally
  {
    tweak4IOS = 0;
  }
}  // --- end of pirouette_4_IOS---
...
var tweak4IOS = 0; // init the flag

最后在 Obj-C 中我在键盘弹出窗口中设置了 var

- (void)keyboardDidShow:(NSNotification *)sender {
CGRect frame = [sender.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];

homeWeb.frame = CGRectMake(homeWeb.frame.origin.x, homeWeb.frame.origin.y,
                           homeWeb.frame.size.width , homeWeb.frame.size.height - frame.size.height     );

self.pinBottom2.constant = frame.origin.y;

// set the JS var so it is done only when keyboard pops initially
[homeWeb stringByEvaluatingJavaScriptFromString:@"tweak4IOS=1;"];

Answer 10

在一个相当老的 ionic / cordova 应用程序中用这个把我的头撞到了墙上。

在 iOS 上，插入符号到处都是，输入字段/表单几乎无法使用。

我们决定使用 WKWebView 而不是自 iOS 8 以来不推荐使用的默认 UIWebView。而且砰！直接工作。不要忘记更新您的键盘插件。

截至今天，对于我们正在使用的 ionic v1 应用程序：

cordova-plugin-ionic-keyboard@2.1.3
cordova-plugin-ionic-webview@2.2.0