關於ios的光標和鍵盤迴彈問題

時間 2019-12-09

標籤關於 ios 光標鍵盤回彈問題欄目 iOS 简体版

原文原文鏈接

　　最近再作項目的時候（移動端），遇到了兩個小問題，一個是ios端鍵盤不回彈的問題（微信瀏覽器），另外一個是ios輸入光標位置問題。首先看第二個問題：javascript

　　就是點擊一個按鈕，要把輸入框裏面原來的內容加上一些固定的內容，而後一塊兒輸出到輸入框。原本這個需求是很簡單的，可是遇到一個問題，就是點擊玩這個按鈕以後，ios端的光標在輸入框的最前面，體驗不是很友好。請看下面的代碼，這個就是我最開始寫的css

 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測試一下，我截圖沒有截到光標；安卓是沒有問題的html

　　這樣的體驗顯然是不能達到需求的，因此去網上找了一下，發現只要把18行和19行的代碼互換位置，這樣就能夠了。這個我也是否是很明白，這個時候Android和ios都是能夠的，真的很神奇，並且解釋不通。java

　　另外一個問題是有的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端是不能夠的，他執行到這一句話的時候，是會報錯的。此次記錄下來，給本身提個醒。瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。