最近在项目中发现同样的代码在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系统下虚拟键盘遮挡文本框问题的解决的更多相关文章

  1. ios下虚拟键盘出现"搜索"字样

    最近在开发过程中,发现用户输入想要检索的内容,弹出虚拟键盘,在安卓机上虚拟键盘最右下角会有‘搜索’字样,而ios上虚拟键盘最右下角只有‘换行’字样, 这样用户体验就会大打折扣. 安卓机上虚拟键盘 io ...

  2. 微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法(转)

    最近在做微信公众号的内嵌页面,发现点击输入框时键盘盖住文本框,找到一段代码解决了这个问题. iOS和android手机都已亲测,需要的可以直接拷贝到代码中使用. js代码如下: $(function ...

  3. iOS系统下 的手机屏幕尺寸 分辨率 及系统版本 总结

    今天  我对iOS系统下 的手机屏幕尺寸 分辨率 及系统版本做了一次系统总结 供大家参考. 首先 是系统:    随着iOS 系统不断升级,现在已经到iOS7.0了, 并且TA有了很多新变化,最震撼的 ...

  4. FIREMONEY手机虚拟键盘遮挡的解决

    FIREMONEY手机虚拟键盘遮挡的解决 尝遍了网上人们提供的N种方法之后,发现还是老猫的方法才是彻底解决问题的办法. 老猫“不看后悔XXX”--->RAD10.2.3 Flying Wang ...

  5. Xcode6.1模拟器ios8.1模拟器不能弹出虚拟键盘及虚拟键盘无法切换中文输入的解决办法

    1.不能弹出虚拟键盘的解决办法 模拟器菜单Hardware->Keyboard->Connect Hardware Keyboard取消选中,快捷键commad+shift+K 2.虚拟键 ...

  6. 微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo

    微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo 前言 做好了项目之后,在各种浏览器里面測试,都没有问题.非常高兴,交付后端使用.然而发如今微信自带浏览器里面,却是出现 ...

  7. iOS Android中 h5键盘遮挡输入框的问题和解决方案

    问题发现:在 Android 部分机型 和 iOS部分系统下 键盘会出现遮挡输入框的情况(壳内).问题解决: Android 经过测试,Android 的6.0版本以上均会出现改问题,归根到底是之前的 ...

  8. ios设备触发虚拟键盘输入后position:fixed 无效的一些简单另类的解决方法。

    首先看一下我要解决的问题,第一张图是正常的情况下,第二张图是点击了输入框之后的情况,就是要解决此问题~! 百度了一下解决方法,好像有以下的一些方法: 1. iscroll 2. Jquery Mobi ...

  9. 移动端ios针对input虚拟键盘挡住的问题

    写移动端的时候发现input的虚拟键盘对Ios的手机不是很友好 我的是苹果6 点击的时候经常会挡住input框 针对这个问题找了很多发现都没效果 最后发现用下面这段js就可以解决了 $("i ...

随机推荐

  1. java/javac命令行如何同时引用多个包;错误 TypeError: 'JavaPackage' object is not callable 的含义

    出现这类错误提示:'JavaPackage' object is not callable,可以看下所引用的jar包或者class文件是否在java的路径搜索范围内 命令行模式下:javac可以编译* ...

  2. Java利用ShutDownHook关闭系统资源

    Java关闭钩子 在Java程序中能够通过加入关闭钩子,实如今程序退出时关闭资源的功能. 使用Runtime.addShutdownHook(Thread hook)向JVM加入关闭钩子 public ...

  3. 修改编辑器为Markdown编辑器

    一直都在使用cnblogs的TinyMCE,不过感觉好久不更新,还是用Markdown吧,写多了Markdown 还真是受感染呢. 学习下吧,边学便用. 参考链接: 序列图 [简明版]有道云笔记Mar ...

  4. [转]jquery异步ajax与服务器通信过程中如何通过then方法链式传递多层数据

    原文:https://www.cnblogs.com/fullstack-yang/p/6115983.html doSubmit: function(){ var dtd = $.Deferred( ...

  5. SSE图像算法优化系列二十二:优化龚元浩博士的曲率滤波算法,达到约1000 MPixels/Sec的单次迭代速度

      2015年龚博士的曲率滤波算法刚出来的时候,在图像处理界也曾引起不小的轰动,特别是其所说的算法的简洁性,以及算法的效果.执行效率等方面较其他算法均有一定的优势,我在该算法刚出来时也曾经有关注,不过 ...

  6. C#读取Excel文件的简单方法

    一.简述 本文讲C#通过第三方库读取Excel的最简单的方法,下文给一个读取行数的例子. 二.依赖 引入nuget.org包如下: <?xml version="1.0" e ...

  7. ionic cordova plugin 安装和使用

    注意事项 ionic1需要ng-cordova plugin的使用都需要放到deviceready事件的回调中, 设备准备好了才能设备交互 plugin只有在真机上才有效果, 模拟器(部分)和brow ...

  8. Linux netstat常用命令

    1.统计80端口连接数netstat -nat|grep -i "80"|wc -l 2.统计httpd协议连接数(查看Apache的并发请求数及其TCP连接状态)ps -ef|g ...

  9. c#异常重试机制

    有时候我们碰到程序异常了,想让程序继续重新执行,进行重试,这时候就需要有一个合适的方法来进行操作: 自己写代码控制太麻烦了,也容易出错.这时候当然是站在巨人的肩膀上, https://github.c ...

  10. BizTalk RosettaNet解决方案之Loopback

    本教程使用 BizTalk Accelerator for RosettaNet (BTARN) 在一台计算机上模拟本组织与合作伙伴组织之间的流程实施情况. 创建本组织 “BizTalk <版本 ...