ios下输入法遮住textarea解决方案

来源:互联网 发布:如何下载app软件 编辑:程序博客网 时间:2024/06/15 05:33

前段时间做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;}

最终采取了第二种方案,试了下体验良好(虽然不算完美~~)
上效果图:
这里写图片描述
这里写图片描述