Mobile Safari - 输入插入符号不会随溢出滚动一起滚动：touch

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的bug：

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

Answer 2

只有我找到了一个解决方法 - 在滚动事件与文本类型检查，如果输入专注于某些其他元素（例如，在按钮上）。结果，虚拟键盘和光标将消失。这个解决方案并不完美，但它不像表单顶部的游标那么可怕。 实施例：

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

Answer 3

有同样的问题，我修复程序

和

之间

-webkit-overflow-scrolling: touch

-webkit-overflow-scrolling: auto 

改变每当我集中投入

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

您可以通过删除选择并重新设置来解决问题。在这里使用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 6

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

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

由于其他古怪与iOS我有该元素的偏移量（）顶部的值保存为originalTop当我的形式加载。 $ content只是一个包含我的表单的可滚动div - 例如：$（'div＃content'）。

Answer 7

这似乎仍然困扰着的WebKit形式的iOS与-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 8

它的确在新发布的iOS 11.I一个bug解决模态的问题通过更改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 9

这是前一段时间，我认为它是固定在IOS11。 x，当然我们仍然需要支持旧版本，上面的建议给了我一个提示，但是他们没有一个能够工作4我的设置。我使用onFocus来触发一个延迟的函数，将焦点添加到/删除当前焦点字段。我正在使用flatJS/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 

最后的对象 - 我设置了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;"];