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;"];