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

Posted 2023-02-19

【中文标题】移动 Safari - 输入插入符号不会随着溢出滚动一起滚动：触摸

【英文标题】：Mobile Safari - Input caret does not scroll along with overflow-scrolling: touch

【发布时间】：2014-01-11 07:34:33

【问题描述】：

我知道 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

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

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

谢谢

【问题讨论】：

另见github.com/twbs/bootstrap/issues/14708

【参考方案1】：

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

@cvrebert filed 错误：

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

【讨论】：

抱歉，必须投反对票，因为有些人可以使用变通方法。不幸的是，我同意这不是一个简单而全面且简单快捷的解决方案，但它适用于我们中的一些人（位置固定等）

【参考方案2】：

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

-webkit-overflow-scrolling: touch

和

-webkit-overflow-scrolling: auto

每当我关注/模糊输入时

【讨论】：

这是唯一对我有用的...谢谢！它修复了插入符号在 ios 上的越界问题。

此修复非常核心，应谨慎使用。对我来说，它导致 Cordova 应用程序中的 UIWebView 崩溃。可能适合网站使用。

对我来说似乎是最好的解决方案

我可以确认这种方法有效，但它似乎不再适用于 ios 13。Apple 在其release notes 中有以下声明：“增加了对单指加速的支持滚动到所有帧和溢出：滚动元素，无需设置 -webkit-overflow-scrolling: touch。”

【参考方案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;

【讨论】：

你从什么地方改的？修复它的部分是什么？

没关系，是 position: fixed 在身体上做到这一点。

【参考方案4】：

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

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

【讨论】：

很好，谢谢。只做$("input[type='text']:focus").blur(); 对我来说效果更好。还包含在一个快速的mobile-safari only 条件中。

Igor 和@Ronny 您的解决方案使滚动行为奇怪..滚动不顺畅。

这是我的唯一解决方案。

【参考方案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);
        

【讨论】：

天才！请记住，大多数滚动方法在完成时都有回调，因此在大多数情况下不需要调用 timeout。

【参考方案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');

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

【参考方案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')。

【参考方案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 指向输入元素的容器元素。

【参考方案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;"];

【参考方案10】：

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

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

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

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

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

【讨论】：

遗憾的是，WKWebView 也不是一个明确的解决方案（至少从 iOS 12 开发者 beta 9 开始）。请参阅 bugs.webkit.org/show_bug.cgi?id=138201#c34 和链接的 YouTube 视频

同意。没有适用于所有人的简单解决方案。必须做出权衡。我在这里发布了我为自己的背景所做的权衡。此处的其他解决方案有效，但不如此解决方案好：几乎没有代码更改替代已弃用的 UIWebView。