最近在项目中发现同样的代码在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. Caffe-SSD相关源码说明和调试记录

    1      对Blob的理解及其操作: Blob是一个四维的数组.维度从高到低分别是: (num_,channels_,height_,width_) 对于图像数据来说就是:图片个数,彩色通道个数, ...

  2. MOS管当开关控制时,为什么一般用PMOS做上管NMOS做下管?

    了解MOS管的开通/关断原理你就会发现,使用PMOS做上管.NMOS做下管比较方便.使用PMOS做下管.NMOS做上管的电路设计复杂,一般情况下意义不大,所以很少采用. 下面先了解MOS管的开通/关断 ...

  3. Win10系统的SurfacePro4如何重装系统-4 如何再次备份和还原系统

    还是进入到PE环境,直接用GHOST,Local-Partition-ToImage即可创建C盘新的备份   选择目标硬盘   选择要备份的分区   选择保存文件的路径(如果没有接键盘,打开底部的屏幕 ...

  4. Guava-Objects使用

    前言 Java中的Object提供了很多方法供所有的类使用,特别是toString.hashCode.equals.getClass等方法,在日常开发中作用很大,Guava中包含Objects类,其提 ...

  5. Web Workers 简介

    web worker 介绍:https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers web ...

  6. 【mysql】GitHub 的 MySQL 高可用性实践分享

    原文出处: shlomi-noach   译文出处:oschina    GitHub 使用 MySQL 作为所有非 git 仓库数据的主要存储, 它的可用性对 GitHub 的访问操作至关重要.Gi ...

  7. 单片机成长之路(51基础篇) - 004 STC89C52MCU 软件实现系统复位

    用户应用程序在运行过程中,有时会有特殊需求,需要实现单片机系统复位(热启动之一),传统的8051单片机由于硬件上未支持此功能,用户必须用软件模拟实现,实现起来较麻烦.STC单片机增加了相应的硬件功能, ...

  8. Mac NVM 配置

    1.NVM 简介 NVM(node version manager)是一个可以让你在同一台机器上安装和切换不同版本 node 的工具. GitHub 地址 2.NVM 环境配置 2.1 安装 NVM ...

  9. html input 文本框 只能输入数字,包含输小数点.

    <input type="text" id="source_tds" name="source_tds" value="&l ...

  10. v2ray和ss的安装资料整理

    v2ray: 1. https://yuan.ga/v2ray-complete-tutorial/ 2. https://toutyrater.github.io/ 推荐使用:v2ray,会比ss快 ...