微信浏览器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);       
  }
}