IOS软键盘收起留白问题及Input光标过长问题
1.Input光标过长问题
iso 中input 光标长度与line-height有关,input本身字体就是上下居中的因此不需要设置,但如果想控制光标的长度可以通过设置line-height高度来控制;
2.IOS软键盘收起留白
1.可以通过输入框失去焦点
<div class="input flex1 aic flex pl20 pr20">
<input v-model="msgContent" type="text" placeholder="说点什么吧" @blur="onBlur">
</div>
//输入框失焦后回到页面首部 IOS12,微信6.7.4有这个问题
onBlur () {
if (isBrower('iphone')) {
window.scrollTo(0,0)
}
window.scrollTo(0,0)
}
如果来多个输入框则会出新下去上来反复的问题
通过监听窗口大小的变化来实现
window.addEventListener('resize', function() {
if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
window.setTimeout(function() {
if ('scrollIntoView' in document.activeElement) {
document.activeElement.scrollIntoView(false)
} else {
document.activeElement.scrollIntoViewIfNeeded(false)
}
}, 0)
}
})
这个方法在微信里面不支持,监听不到;
3.通过全局监听失去焦点 ,并使用变量延迟进行处理
var flage = false
window.addEventListener('focusin', function() {
flage = false
})
window.addEventListener('focusout', function() {
flage = true
setTimeout(function(){
if(flage){
window.scrollTo(0, 0)
}
})
})
版权声明:本文由Web学习之路发布,如需转载请注明出处。