项目上要做一个留言回复的框.
类似这种用一个 div 套在 input 外面, 点击按钮时, 这个 div 出现, 位于页面底部. 并且 input 获得焦点, 自动弹出系统键盘.
但是, 在开发的时候发现, 在 iOS 系统中这个 div 总是被键盘遮住, 曾经使用了垫高 div 框的办法, 天真的以为能够使它往上挪, 但是发现没有用, 需要手动往上拉才能出来.
查了很久, 看网上很多人都死在了这个问题上.
比较靠谱的答案在 知乎 上找到的
原因是 fixed 定位加上 bottom:0 在 ios 里无效了, 有人建议是改为弹性布局, 有人建议 js 控制.
一开始我也采用了 js 控制, 但是发现效果不太好. 有时第一次点击的时候, 还是会出现 input 框被遮盖的问题, 必须手动往上滑动, 把 div 拉出来后, 再次点击, 才会不被遮住... 我也不知道为何....
而且在安卓上是没有这种问题的, 只在 iOS 系统上出现, 并且还和系统的版本有关. 之前使用了 scrollIntoView() 之后感觉好用了很多, 但是后来又反应被遮住了. 发现原来和 iOS 系统版本也有关系. 参考了知乎上的各路答案后, 找到了一个比较靠谱和折中的办法. 就是获得 html 或者 body 的高度, 然后点击的时候令滚动条滚动到底部.
var scrollHeight = $('html').prop("scrollHeight");
var target = document.getElementById("comment-content");
target.focus();
// 使用定时器是为了让输入框上滑时更加自然
setTimeout(function(){
//target.scrollIntoView(true);
// target.scrollIntoViewNeeded();
$('.add-comment').animate({scrollTop:scrollHeight}, 100);
},100);
被注释掉的是以前使用的方法, 用这种方法时, 配合设置 html 标签和 body 标签的 height:100% 和 overflow: hidden 来使用更加酥脆... 不过现在我已经改用 scrollTop 后, 感觉有没有都一样, 就删去了.
来源: http://www.bubuko.com/infodetail-2474838.html