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