最近再做項目的時候（移動端），遇到了兩個小問題，一個是ios端鍵盤不回彈的問題（微信瀏覽器），另一個是ios輸入游標位置問題。首先看第二個問題： 就是點擊一個按鈕，要把輸入框裡面原來的內容加上一些固定的內容，然後一起輸出到輸入框。本來這個需求是很簡單的，但是遇到一個問題，就是點擊玩這個按鈕之後，io ...
最近再做項目的時候（移動端），遇到了兩個小問題，一個是ios端鍵盤不回彈的問題（微信瀏覽器），另一個是ios輸入游標位置問題。首先看第二個問題：
就是點擊一個按鈕，要把輸入框裡面原來的內容加上一些固定的內容，然後一起輸出到輸入框。本來這個需求是很簡單的，但是遇到一個問題，就是點擊玩這個按鈕之後，ios端的游標在輸入框的最前面，體驗不是很友好。請看下麵的代碼，這個就是我最開始寫的
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 </head> 8 <body> 9 <p>測試ios端游標在表情之前的問題</p> 10 <textarea name="" rows="" cols="">123</textarea> 11 <button>獲取焦點</button> 12 </body> 13 <script type="text/javascript"> 14 var btn = document.getElementsByTagName("button")[0]; 15 var txt = document.getElementsByTagName("textarea")[0]; 16 btn.onclick = function(){ 17 18 txt.value = txt.value + "456"; 19 txt.focus(); 20 } 21 </script> 22 </html>
其中18行是獲取原來裡面的值，然後拼接上最新的值，然後讓輸入框獲取焦點，這個時候ios 的游標就在輸入框的最前面。大家可以找個ios測試一下，我截圖沒有截到游標；安卓是沒有問題的
這樣的體驗顯然是不能達到需求的，所以去網上找了一下，發現只要把18行和19行的代碼互換位置，這樣就可以了。這個我也是不是很明白，這個時候Android和ios都是可以的，真的很神奇，而且解釋不通。
另一個問題是有的ios版本，當彈出輸入法輸入完成之後，鍵盤迴去了，但是頁面沒有返回。這個時候就需要在輸入框中失去焦點的情況下，調用一個函數，我把函數放在下麵：
1 /*ios鍵盤迴彈**********************************************/ 2 function kickBack() { 3 //alert("是去焦點了"); 4 setTimeout(() => { 5 window.scrollTo(0, document.body.scrollTop + 1); 6 document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1); 7 }, 10) 8 } 9 /*ios鍵盤迴彈end**************************************/
最後再說一下關於ios的css相容問題，就是我在設置背景的時候，我是用的rgb來設置顏色，但是因為編輯器的原因，他給我多了一個a，成了rgba（），最後一個是背景透明。但是在ios端是不可以的，他執行到這一句話的時候，是會報錯的。這次記錄下來，給自己提個醒。
