IOS系统下虚拟键盘遮挡文本框问题的解决
最近在项目中发现同样的代码在Android端微信网页中点击文本框唤出的虚拟键盘不会遮挡文本框,但是在IOS端的微信网页中点击文本框唤出的键盘却在大部分情况下会遮挡文本框
经过高人指点,这个问题终于解决了
下面说说解决办法:
主要代码
document.body.scrollTop = document.body.scrollHeight;
然后在文本框获取焦点的时候,可以定义一个计时器,一直执行上面的那句话
在文本框失去焦点的时候,就把之前的计时器清除掉即可
js写法:
let interval; //获取文本框对象
let text = document.getElementById('text').getElementsByTagName('textarea')[0];
//消息框获取焦点
text.onfocus = function () {
interval = setInterval(function () {
scrollToEnd();
}, 500)
}; //消息框失去焦点
text.onblur = function () {
clearInterval(interval);
}; //滚动到底部
function scrollToEnd() {
document.body.scrollTop = document.body.scrollHeight;
}
jquery写法:
let interval;
let text = $('#text textarea');
//消息框获取焦点
text.focus (function(){
interval = setInterval(function () {
scrollToEnd();
}, 500)
}); //消息框失去焦点
text.onblur(function () {
clearInterval(interval);
}); //滚动到底部
function scrollToEnd() {
document.body.scrollTop = document.body.scrollHeight;
}
IOS系统下虚拟键盘遮挡文本框问题的解决的更多相关文章
- ios下虚拟键盘出现"搜索"字样
最近在开发过程中,发现用户输入想要检索的内容,弹出虚拟键盘,在安卓机上虚拟键盘最右下角会有‘搜索’字样,而ios上虚拟键盘最右下角只有‘换行’字样, 这样用户体验就会大打折扣. 安卓机上虚拟键盘 io ...
- 微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法(转)
最近在做微信公众号的内嵌页面,发现点击输入框时键盘盖住文本框,找到一段代码解决了这个问题. iOS和android手机都已亲测,需要的可以直接拷贝到代码中使用. js代码如下: $(function ...
- iOS系统下 的手机屏幕尺寸 分辨率 及系统版本 总结
今天 我对iOS系统下 的手机屏幕尺寸 分辨率 及系统版本做了一次系统总结 供大家参考. 首先 是系统: 随着iOS 系统不断升级,现在已经到iOS7.0了, 并且TA有了很多新变化,最震撼的 ...
- FIREMONEY手机虚拟键盘遮挡的解决
FIREMONEY手机虚拟键盘遮挡的解决 尝遍了网上人们提供的N种方法之后,发现还是老猫的方法才是彻底解决问题的办法. 老猫“不看后悔XXX”--->RAD10.2.3 Flying Wang ...
- Xcode6.1模拟器ios8.1模拟器不能弹出虚拟键盘及虚拟键盘无法切换中文输入的解决办法
1.不能弹出虚拟键盘的解决办法 模拟器菜单Hardware->Keyboard->Connect Hardware Keyboard取消选中,快捷键commad+shift+K 2.虚拟键 ...
- 微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo
微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo 前言 做好了项目之后,在各种浏览器里面測试,都没有问题.非常高兴,交付后端使用.然而发如今微信自带浏览器里面,却是出现 ...
- iOS Android中 h5键盘遮挡输入框的问题和解决方案
问题发现:在 Android 部分机型 和 iOS部分系统下 键盘会出现遮挡输入框的情况(壳内).问题解决: Android 经过测试,Android 的6.0版本以上均会出现改问题,归根到底是之前的 ...
- ios设备触发虚拟键盘输入后position:fixed 无效的一些简单另类的解决方法。
首先看一下我要解决的问题,第一张图是正常的情况下,第二张图是点击了输入框之后的情况,就是要解决此问题~! 百度了一下解决方法,好像有以下的一些方法: 1. iscroll 2. Jquery Mobi ...
- 移动端ios针对input虚拟键盘挡住的问题
写移动端的时候发现input的虚拟键盘对Ios的手机不是很友好 我的是苹果6 点击的时候经常会挡住input框 针对这个问题找了很多发现都没效果 最后发现用下面这段js就可以解决了 $("i ...
随机推荐
- 修正mui的上拉加载和下拉刷新的一次未完成就执行下一次的请求
有的用户会在第一次 上拉和下拉 事件未完成的时候,就执行第二次,第三次请求.... 提示文字也加上的位置动态计算,修改了mui的部份源码实现,我们的需求达到了 我们来看一下 腾讯新闻 的效果:
- dubbo请求报文实例
dubbo请求报文实例: ============================================= Request [ id=6723668, // 消息ID,Long类型 vers ...
- UVA524 素数环 Prime Ring Problem
题目OJ地址: https://www.luogu.org/problemnew/show/UVA524 hdu oj 1016: https://vjudge.net/problem/HDU-10 ...
- 一个网站SEO优化方案
首先,前端/页编人员主要负责站内优化,主要从四个方面入手: 第一个,站内结构优化 合理规划站点结构(1.扁平化结构 2.辅助导航.面包屑导航.次导航) 内容页结构设置(最新文章.推荐文章.热门文章.增 ...
- Git回滚代码到某个commit
回退命令: $ git reset --hard HEAD^ 回退到上个版本$ git reset --hard HEAD~3 回退到前3次提交之前,以此类推,回退到n次提交之前 $ git rese ...
- 20.翻译系列:Code-First中的数据库迁移技术【EF 6 Code-First系列】
原文链接:https://www.entityframeworktutorial.net/code-first/migration-in-code-first.aspx EF 6 Code-First ...
- hive Spark SQL分析窗口函数
Spark1.4发布,支持了窗口分析函数(window functions).在离线平台中,90%以上的离线分析任务都是使用Hive实现,其中必然会使用很多窗口分析函数,如果SparkSQL支持窗口分 ...
- 小米Pro 安装苹果系统
参考 http://www.miui.com/thread-11363672-1-1.html http://www.miui.com/thread-7601066-1-1.html https:// ...
- 批量生产Xcode group 并映射 实体目录
xaddgroup A Ruby gem . Batch Add Group To Xcodeproj , map Real Dir. Install $ gem install xaddgroup ...
- Elasticsearch常用配置及性能参数[转]
cluster.name: estest 集群名称node.name: “testanya” 节点名称 node.master: false 是否主节点node.data: true 是否 ...