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