移动端ios输入框遇到的一些问题
程序员文章站
2022-04-10 15:01:31
移动端ios输入框日常开发中使用input固定定位在底部遇到的一些问题,话不多说上代码 ~~~~(大佬勿喷)输入框收起时底部留白一大块let scrollY = null;$('.animated').focus(function(){scrollY = $(this).offset().top// 记录获取焦点时页面距离顶部的距离});$('.animated').blur(function(){window.scroll(0, scrollY);...
移动端ios输入框
日常开发中使用input固定定位在底部遇到的一些问题,话不多说上代码 ~~~~(大佬勿喷)
输入框收起时底部留白一大块
let scrollY = null;
$('.animated').focus(function(){
scrollY = $(this).offset().top // 记录获取焦点时页面距离顶部的距离
});
$('.animated').blur(function(){
window.scroll(0, scrollY); //失焦后强制让页面归位
});
输入框获取焦点时会被页面遮盖
$('.animated').focus(function(){
scrollY = $(this).offset().top
// 虚拟键盘挡住input输入框解决方法
setTimeout(function(){
window.scrollTo(0,document.body.clientHeight);
}, 500);
});
输入框获取焦点时滑动页面输入框跟着页面滚动
这里我是用了当输入框失去焦点时软键盘回收,至于怎么让页面滑动而输入框不跟着动我也没找到好办法,如果有大佬知道的话也可以分享下~~~~
完整代码
let scrollY = null;
$('.animated').focus(function(){
scrollY = $(this).offset().top
// 虚拟键盘挡住input输入框解决方法
setTimeout(function(){
window.scrollTo(0,document.body.clientHeight);
}, 500);
});
$('.animated').blur(function(){
window.scroll(0, scrollY); //失焦后强制让页面归位
});
$(document).on('touchstart', function(e){
if(e.target.nodeName.toLowerCase() !== 'textarea'){
if($('.animated').is(':focus')){
$('.animated').blur()
return
}
}
})
哈哈 以上就是我的解决方法 后续想到别的再补充~~~
本文地址:https://blog.csdn.net/weixin_45412615/article/details/107557426