微信中 input 引起的一些常見問題
一、ios端兼容input光標高度
input輸入框光標，在安卓手機上顯示沒有問題，但是在蘋果手機上 當點擊輸入的時候，光標的高度和父盒子的高度一樣。
原因：
通常我們習慣用height屬性設置行間的高度和line-height屬性設置行間的距離（行高），當點擊輸入的時候，光標的高度就自動和父盒子的高度一樣了。（谷歌瀏覽器的設計原則，還有一種可能就是當沒有內容的時候光標的高度等於input的line-height的值，當有內容時，光標從input的頂端到文字的底部
解決方法：
高度height和行高line-height內容用padding撐開
二、ios端上下滑動時卡頓，頁面缺失
在ios端，上下滑動頁面時，如果頁面高度超出了一屏，就會出現明顯的卡頓，頁面有部分內容顯示不全的情況，例如下圖，右圖是正常頁面，邊是ios上下滑動后，卡頓導致如左圖下面部分丟失。
原因：
籠統說微信瀏覽器的內核，Android上面是使用自帶的WebKit內核，iOS里面由於蘋果的原因，使用了自帶的Safari內核，Safari對於overflow-scrolling用了原生控件來實現。對於有-webkit-overflow-scrolling的網頁，會創建一個UIScrollView，提供子layer給渲染模塊使用。
解決方法：
只需要在公共樣式加入下面這行代碼
*{ -webkit-overflow-scrolling: touch;}
三、ios鍵盤喚起后收起頁面不歸位
輸入內容，軟鍵盤彈出，頁面內容整體上移，但是鍵盤收起，頁面內容不下滑
原因：固定定位的元素 在元素內 input 框聚焦的時候 彈出的軟鍵盤占位 失去焦點的時候軟鍵盤消失 但是還是占位的 導致input框不能再次輸入 在失去焦點的時候給一個事件
解決方法：
<input @blur.prevent="changeBlur()" /> //input標簽中加上以下代碼：
changeBlur(){
let u = navigator.userAgent,
app = navigator.appVersion;
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isIOS){
setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0 window.scrollTo(0, Math.max(scrollHeight - 1, 0))
},
200) } }
四、安卓彈出的鍵盤遮蓋到文本框
解決方法：
給input和textarea標簽添加focus事件，如下，先判斷是不是安卓手機下的操作，當然，可以不用判斷機型，Document 對象屬性和方法，setTimeout延時0.5秒，因為調用安卓鍵盤有一點遲鈍，導致如果不延時處理的話，滾動就失效了
<input @focus="changefocus()" /> //input標簽中加上以下代碼：
changefocus(){
let u = navigator.userAgent, app = navigator.appVersion;
let isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1;
if(isAndroid){
setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
document.activeElement.scrollIntoView();
}, 500);
}
}