ios11，彈出層內的input框游標錯位 鍵盤彈出時，輸入資訊，游標一直亂跳

標籤：輸入框   去掉   資訊   flow   tde   baidu   dev   scrolltop   ios1   

　　之前開發了一個項目，維護期中蘋果手機突然出現游標錯位現象，經過排查，發現是最新的ios11系統的鍋。

　　具體情況：彈出層使用position: fixed；彈出層內附帶input/textarea輸入框，ios11系統的蘋果機使用者在點擊輸入框，出現鍵盤後，彈出層被頂上去，而游標還停留在原處，即出現錯位情況。

　　解決思路：

1. 解決游標錯位：彈出層設定為position: absolute；body添加position: fixed;
2. 彈出層重新置放：擷取捲軸高度，設定為彈出層Top值；

   function getScrollTop(): string {
     const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
     return scrollTop + ‘px‘;
   }

　　解決過程中碰到的問題：body設定為position: fixed後，一旦彈出層Top屬性被賦值，頁面會預設回到最頂端，使用者體驗感極差。

　　在此基礎上決定不設定body的定位，改為overflow: hidden; 等使用者執行完操作，關閉彈出層時，再還原overflow: initial; 缺點是彈出層底部的內容無法再進行滾動，但是對使用者體驗無太大影響。在pc上測試無誤後發布test環境，真機測試簡直爆炸，底部內容仍舊可以自由滑動，連帶著固定在上層頁面的彈出層一起不受拘束的自由愉快滑動。

　　由此發現的坑2：移動端設定body的overflow: hidden不生效，即使附加height: 100%;

　　順著思路下去，決定採取阻止頁面的touchmove事件來實現固定底部頁面的想法　　　　　　　

public fixBg() {　　　　//阻止頁面底部touchmove事件
  document.addEventListener("touchmove",function(e){
      e.preventDefault();
      e.stopPropagation();
  },false);
}

public flexibleBg() {　　　　//恢複touchmove事件
  document.addEventListener(‘touchmove‘, function (e) {
    e.returnValue = true;
  }, false);
}
、
from:https://www.cnblogs.com/teLumy/p/8257591.html

解釋fixed的好連結

http://efe.baidu.com/blog/mobile-fixed-layout/?utm_source=tuicool&utm_medium=referral


在一個頁面中點擊一個按鈕會出現一個彈出框，這個彈出框給了fixed定位，並且寬高都等於100%，在這個彈出框中有包含input輸入框的div,這個div未做定位設定。頁面操作中看不出來什麼問題，真機操作的時候會發現，安卓上沒有問題，但是在ios上就出現問題了，尤其是ios11系統上，問題表現非常明顯。在輸入框輸入內容的時候，手機下方會彈出一個鍵盤，然後輸入框中游標就跟丟了魂似的亂竄，本以為會是個別手機螢幕問題，拿出幾個ios測試機，一番簡單測試後發現，是普遍存在的問題，尤其在ios11上比較明顯。看著那亂竄的游標，瞬間懵十三了。 
一番簡單查閱，瞭解到這是在ios上存在的一個坑，前人已經給出了幾種解決方案，查看幾篇相關技術部落格，看了一遍，那寫的是毛玩意，頓時心有不暢，然後嘗試著按照自己理解的思路去解決，結果成了，游標的魂終於回來了。在此分享下我的解決思路： 
如果彈出框是fixed定位，並且彈出框中輸入框，那麼就很可能會出現這種問題。很簡單的解決辦法，你把fixed定位去掉，改變你的樣式表現方式。我這裡是把彈出框改成absolute定位，彈出框的父元素改成relative定位解決的。

ios11，彈出層內的input框游標錯位 鍵盤彈出時，輸入資訊，游標一直亂跳