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 ...
随机推荐
- 咏南新CS三层开发框架
咏南新CS三层开发框架 咏南WEB桌面框架演示:47.106.93.126:9999 咏南WEB手机框架本地:47.106.93.126:8077 咏南CS框架下载:https://pan.baidu ...
- ClickHouse高可用集群的配置
上一篇文章写过centos 7下clickhouse rpm包安装和基本的目录结构,这里主要介绍clickhouse高可用集群的部署方案,因为对于默认的分布式表的配置,每个分片只有一份,这样如果挂掉一 ...
- [Pipy]利用pip2pi搭建本地pypi源
当我们一个团队开发一个项目的时候,须要的Python第三方包基本是固定的.每次搭建新环境的时候总是由于各种内外网,https问题花费大量的时间来安装执行环境. 所以搭建一个本地的,小巧的,仅仅包括须要 ...
- NOIP2011普及组 瑞士轮
OJ地址: https://www.luogu.org/problemnew/show/P1309 http://bailian.openjudge.cn/practice/4031/ 总时间限制: ...
- IDC机房机器日志采集配置
以机器 gpu-server-011 为例: 机房机器添加AliUids操作 [root@gpu-server-011 ~]# mkdir -p /etc/ilogtail/users/ [root ...
- iOS 线上版本图片资源格式的问题导致的闪退
链接:https://www.jianshu.com/p/6492779cb89e來源:简书 导致这种问题的原因是:在 Xcode 8 中,当你资源文件中[含有16位图]或者[图片显示模式γ值为'P3 ...
- 基于 Python 官方 GitHub 构建 Python 文档
最近在学 Python,所以总是在看 Python 的官方文档, https://docs.python.org/2/ 因为祖传基因的影响,我总是喜欢把这些文档保存到本地,不过 Python 的文档实 ...
- android mat 转 bitmap
Bitmap bmp = null; Mat tmp = new Mat (height, width, CvType.CV_8U, new Scalar(4)); try { //Imgproc.c ...
- c# 基于redis分布式锁
在单进程的系统中,当存在多个线程可以同时改变某个变量(可变共享变量)时,就需要对变量或代码块做同步,使其在修改这种变量时能够线性执行消除并发修改变量. 而同步的本质是通过锁来实现的.为了实现多个线程在 ...
- 14.翻译系列:从已经存在的数据库中生成上下文类和实体类【EF 6 Code-First系列】
原文链接:https://www.entityframeworktutorial.net/code-first/code-first-from-existing-database.aspx EF 6 ...