1ios键盘弹出隐藏后存在留白
// input失去焦点时加入如下代码
if (/iPhone|iPod|ios|iPad/i.test(navigator.userAgent)) {
setTimeout(() => {
document.activeElement.scrollIntoViewIfNeeded(true)
this.openTouch()
},10)
}
或者
if (detectOS().ios) window.scroll(0,0)
https://blog.csdn.net/weixin_45152159/article/details/97247488
https://www.jianshu.com/p/4ad7108b5705
2ios input获取焦点时不出现光标
input {
user-select: auto;
}
3IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题
changeText () {
// IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题
if(this.value !== $(`#${this.eleId}`).val()){
this.value = $(`#${this.eleId}`).val();
}
}
4IOS滚动穿透问题
// 锁定body滚动条--主要解决用户弹框滚动时的穿透
Vue.prototype.closeTouch = function () {
document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {passive: false}) // 阻止默认事件
}
Vue.prototype.openTouch = function () {
document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {passive: false}) // 打开默认事件
}
handler: (e) => {
e.preventDefault()
}
打开picker等弹框的时候,调用this.closeTouch()
,锁定滚动,阻止默认事件,关闭弹框的时候调用this.openTouch()
打开默认事件
参考:https://segmentfault.com/a/1190000022560927
5andriod 端滚动当前元素到屏幕最顶端
一个元素的scrollTop
值是这个元素的内容顶部(卷起来的)到它的视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的scrollTop
值为0
。Element
接口的scrollIntoView()方法会滚动元素的父容器,使被调用scrollIntoView()的元素对用户可见。
const element = document.getElementById('hidden-field');
_this.blankHeight = element.getBoundingClientRect().top + 'px'
_this.showBlank = true
if (element) {
const timerout = setTimeout(()=> {
element.scrollIntoView({
behavior: "smooth",
block: "start",
// 修复安卓手机当点击位置在屏幕右侧的输入框,屏幕就会左移
inline: "end"
})
clearTimeout(timerout)
}, 0)
}
6ios 端滚动当前元素到屏幕最顶端
const ele = document.getElementById('hidden-field');
_this.blankHeight = ele.getBoundingClientRect().top + 'px'
_this.showBlank = true
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
// 下移页面
window.scroll({
left: 0,
top: ~scrollHeight,
behavior: "smooth"
})
// 滚动单元格到视口
setTimeout(() => {
const element = $('#wrapper');
const input = document.getElementById('hidden-field');
const crossword = document.getElementById('crossword');
element.scrollTop(input.getBoundingClientRect().top - crossword.getBoundingClientRect().top)
},100)
}, 100)
7新ipad ua不带有ipad字段导致的ipad检测失败
export const detectOS = () => {
const ua = navigator.userAgent
const iphone = /(iPhonesOS)s([d_]+)/.test(ua) && !window.MSStream
const ipad = /(iPad|Macintosh).*OSs([d_]+)/.test(ua) && !iphone && !window.MSStream && 'ontouchend' in document
const android = navigator && navigator.userAgent && navigator.userAgent.toUpperCase().indexOf('ANDROID') > -1
const ios = iphone || ipad
return { ios, android }
}
8安卓端做成类似ios的body滚动效果