app內嵌H5遇到的部分坑

1.input組件

　　input設置type=number（鍵盤彈出為數字）問題

　　　　（1）input的maxlength屬性失效：只能通過輸入事件來對輸入的值進行限制

　　　　（2）樣式問題：在部分的android手機上面出現樣式問題，需要去掉input的默認樣式

input,textarea {
    border: 0;
    -webkit-appearance: none; //可同時屏蔽輸入框怪異的內陰影,解決iOS下無法修改按鈕樣式,測試還發現,加了此屬性后,iOS下默認還是有圓角的,不過可以用border-radius屬性修改
}

 

2.select組件

　　select設置問題

　　　　（1）禁用默認的箭頭

::-ms-expand修改表單控件下拉箭頭,設置隱藏並使用背景圖片來修飾

select::-ms-expand { display:none; }

 

3.視頻音頻autoplay屬性失效

　　Android和ios系統都會禁止自動播放和js觸發播放視頻或者音頻，我們只能通過用戶的touchstart觸碰觸發播放並暫停，然后再通過相應的js進行操作

document.addEventListener('touchstart', function () {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});

 

4.fixed定位問題

　　在ios系統下，fixed屬性在鍵盤頂起的時候會失效，所以同意使用absolute代替

 

5.ios常按頁面元素選中

　　加入禁止選中樣式

　　

-webkit-touch-callout:none;  //系統默認菜單被禁用;可以實現頁面因為長按彈出各種操作窗口
-webkit-user-select:none; //webkit瀏覽器  
-khtml-user-select:none; //早期瀏覽器 
-moz-user-select:none; //火狐 
-ms-user-select:none; //IE10 
user-select:none; 

input { -webkit-user-select:auto; //webkit瀏覽器（防止input無法正常輸入） }

 

6.ios鍵盤彈出下落bug問題

created() {
    this.handleFocusOut();
    this.handleResize();
},
methods:{
    handleFocusOut() {
      // input 焦點失焦后，ios 鍵盤收起，但沒有觸發 window resize，導致實際頁面dom仍然被鍵盤頂上去--錯位
      document.addEventListener('focusout', () => {
        document.body.scrollTop = 0;
      });
    },
    // 監聽resize事件（鍵盤彈起觸發），然后將 input textarea 元素滑動到可視區域，並將特定元素隱藏
    handleResize() {
      const clientHeight = document.documentElement.clientHeight;
      window.addEventListener('resize', () => {
        // 判斷當前 active 的元素是否為 input 或 textarea
        if (
          document.activeElement.tagName === 'INPUT' ||
          document.activeElement.tagName === 'TEXTAREA'
        ) {
          setTimeout(() => {
            // 原生方法，滾動至需要顯示的位置
            document.activeElement.scrollIntoView();
          }, 0);
        }

        // 解決鍵盤彈起后 fixed 定位元素被頂起問題
        const bodyHeight = document.documentElement.clientHeight;
        const ele = document.getElementById('fixed-bottom');
        if (ele) {
          if (clientHeight > bodyHeight) {
            ele.style.display = 'none';
          } else {
            ele.style.display = 'block';
          }
        }
      });
    }
}