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';
          }
        }
      });
    }
}

原文地址：https://www.cnblogs.com/longflag/p/11847239.html