前段时间做app内嵌h5页面时遇到一个问题,需求背景是这样的:
点击底部的发表评论,从底部弹起发表评论输入框(textarea元素)
问题出现了:ios下输入法把textarea遮住了,而且页面上下是可以滚动的。。。
初期解决方案:改变css布局
position:fixed;
bottom:0;
left:0;
width:100%;
都无效,网上查了很多方案都是千奇百怪,不知所云~
脑海中思考了良久才有了两种预期可实行方案。
预想方案:
1. 调用终端接口。。。
但缺点也是明显的
- 增加了终端工作量
- 需要和终端发生交互,增大了出bug的概率
- 脱离终端环境问题将重现(比如要移植到公众号)
综上,此方案只能当做备选方案,还不是目前最优方案~
2. 将textarea输入框布局到页面顶部,增加底部遮罩层,当用户focus到textarea时禁止触发页面滚动,具体方案:
$textarea.focus();
window.ontouchmove = function(){
return false;
}
这里监听的是window的touchmove事件
当关闭输入框是在
window.ontouchmove = function(){
return true;
}
最终采取了第二种方案,试了下体验良好(虽然不算完美~~)
上效果图: