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
Apple Radar：http://openradar.appspot.com/18819624

Answer 2

如果出现同样的问题，我的解决办法就是在

之间改变

-webkit-overflow-scrolling: touch

和

-webkit-overflow-scrolling: auto

每当我对输入进行聚焦/模糊时

Answer 3

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

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

Answer 4

我花了很多时间试图解决这个问题，并且没有成功解决这里提到的其他想法。

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

这给了我这个想法 - 也许通过使用一些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 5

这确实是新发布的iOS 11上的一个错误。我通过更改css解决了模态问题：

.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 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，我不确定这是否有效，但它对我有用。我只是触发＆＃34;模糊＆＃34;元素上的处理程序实际上并没有导致元素失去焦点，它只是触发处理程序，好像它们是由用户交互自然触发的一样。看来：

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

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

Answer 8

这似乎仍然困扰iOS中的-webkit-overflow-scrolling:touch的webkit表单，同样在iOS 11中。基于上面的答案，并且因为它需要关注input或textearea元素插入不合适的地方，这是我自己的方法＆＃34;纠正＆＃34;为它

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

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

Answer 9

这是不久前的，我认为它已在IOS11.x上修复，当然我们仍然需要支持旧版本，上面的建议给了我一个提示，但没有一个工作4我的设置。我使用onFocus来触发延迟函数，该函数将char添加/删除到当前聚焦字段。我使用的是平角棱镜/ 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中我设置了键盘pop中的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

在一个很旧的离子/科尔多瓦应用中，我的头靠在墙上。

在iOS上，插入符号无处不在，并且在几乎不可用的地方输入字段/表单。

我们决定使用WKWebView，而不是自iOS 8开始不推荐使用的默认UIWebView。立即工作。不要忘记也更新您的键盘插件。

到目前为止，对于我们的离子v1应用程序，我们正在使用：

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

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

10 个答案: