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;}
最终采取了第二种方案,试了下体验良好(虽然不算完美~~)
上效果图:
阅读全文
0 0
- ios下输入法遮住textarea解决方案
- 解决PopupWindow遮住输入法
- 处理input输入框被输入法遮住
- textarea在IE、Firefox下统一效果的解决方案
- ios 键盘遮住输入框
- IOS 键盘遮住了TextField
- 火狐textarea输入法的bug
- 菜单被select遮住的解决方案
- flash遮住弹出的DIV层-解决方案
- iOS下输入法词库的操作
- 移动端踩坑记---------ios下输入法遮挡input
- Android 自定义全局标题栏 解决输入法遮住屏幕问题
- windows下-phpstrom下搜狗输入法光标不一致的解决方案
- windows下-phpstrom下搜狗输入法光标不一致的解决方案
- ios开发防止键盘遮住文本框
- ios TextField 不被键盘遮住
- ios开发防止键盘遮住文本框
- textarea字数限制的解决方案
- 【VC】编译生成*.exe的同时生成*.lib/*.exp
- ubuntu16.04 搜狗输入法/谷歌拼音输入法
- ApringBoot自定义拦截器
- 添加邮箱功能
- linux--软件依赖管理工具
- ios下输入法遮住textarea解决方案
- date,Char转换
- DataFrame/DataSet 创建
- 运维技能
- sqlserver sp_executesql 动态SQL字符长度超过8000
- 去除inline-block元素间间距的N种方法
- DataFrame/DataSet 操作
- Qt打包和打包软件
- 接口测试从未如此简单