1.部分iOS系统中软键盘收起H5页面不回落
项目中遇到了,页面中input框输入信息软件盘弹起,输入完成后,点击确定,软件键盘收起时,发现页面底部滚动到上面,底部留白,页面不会弹到底部。解决方法如下:
// 解决H5页面ios软键盘收回页面卡半屏问题
$("input,select").blur(function() {
var u = navigator.userAgent;
if (u.indexOf('iPhone') > -1) {
//苹果手机
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop ||
document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);
}
})
//解决H5页面安卓机型中软键盘收回页面卡半屏问题
const el = document.documentElement || document.body
const originHeight = el.clientHeight
window.addEventListener('resize', () => {
const resizeHeight = el.clientHeight
if (resizeHeight < originHeight) {
} else {
$("input,select").blur()
}
}, false)
2.部分iOS机型中input输入内容显示不全
在ios系统上聚焦input输入框输入文字,只有第一个字能显示,后面的字都无法显示,只有光标在动
收起键盘,失焦后显示正常
(1)一个很蠢但有效的解决方法,强制页面做了细微的滑动
$(document).on('input', 'input[name=name]',function (e) {
let index = $('input[name=name]').val().length * 0.01,
_top = $(".edit_modal").scrollTop();
e.target.scrollIntoView(true);
$(".edit_modal").animate({ scrollTop: _top + index + 'px'}, 0);
})
(2)给输入框加个聚焦事件:
handleFocus(e) {
setTimeout(function() {
e.target.scrollIntoView(true)
e.target.scrollViewIfNeeded()
}, 200)
}
只是浅陋,如果有写的不正确或更好的方法、欢迎留言拍砖!
本文地址:https://blog.csdn.net/qq_41725450/article/details/109363348
您可能感兴趣的文章:
- Xcode解决“Implicit declaration of function 'XXX' is invalid in C99” 警告或报错
- safari无法调试iphone提示“无可检查的应用程序”的解决方法
- iOS----------The Apple Developer Program License Agreement has been updated.
- ios14个人热点消失了怎么办? ios14找不到个人热点的解决办法
- 按键精灵移动端系列 - IOS(苹果版)安装1.3.8 deb
- 苹果iOS 14微信界面显示不全该怎么办?
- mac版本cornerstone的无限期破解方法
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
网友评论