在最近的开发中遇到个问题;
安卓机 在微信端光标移动输入框 placeholder=“请输入车主名称” 这提示字会闪烁,页面出现抖动问题;
找了很多资料,应该是浏览器的问题,在谷歌中是合适的。
而苹果机不存在这个问题;
苹果机在软键盘打开的时候,底部有fixed定位的button等元素会被提起来,造成部分图片变形;
故:
//判断手机是Android还是ios if (/Android/gi.test(navigator.userAgent)) { var winHeight = $(window).height(); //获取当前页面高度 window.addEventListener('resize', () => { var newInnerHeight = window.innerHeight; if (innerHeight >newInnerHeight) {
//软键盘弹出事件 console.log("软键盘弹出事件"); } else{
//软键盘关闭事件 console.log("软键盘关闭事件");
//执行方法 isResize(); } }); } else { window.addEventListener('focusout', () => { // 键盘收起事件处理 isResize() }); }
//当软键盘收起的时候,input,select等失去焦点,然后再让页面复位 function isResize(){ $(document).on('focusout', function() { //软键盘收起的事件处理 var heigs = document.body.scrollHeight; document.body.scrollTop = heigs; }); $("input,select").blur(function() { document.body.scrollTop = document.documentElement.scrollTop = 0; setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0)); }, 100); }); $("input,select").on("blur",function(){ window.scroll(0,0);//失焦后强制让页面归位 }); }
至此问题解决了;
有需要的小伙伴可以参考参考