微信浏览器input常见问题

微信中 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);       
  }
}