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 ...
随机推荐
- securecrt通过ssh连接板子: 密钥交换失败,没有兼容的加密程序
在用securecrt连接板子时遇到如下问题: 需要修改板子上的/etc/ssh/ssh_config和/etc/ssh/sshd_config. 修改/etc/ssh/ssh_config,取消下面 ...
- C# ReaderWriterLockSlim 实现
其实ReaderWriterLockSlim的实现前段时间看了,当时不打算记录下来的,因为它的实现实在System.Core项目里面,而不是mscorlib项目.按照惯例我们还是先看看网上的一些说法吧 ...
- 分享12款令人瞠目结舌的WebVR演示和实验效果
不管你信不信, WebVR绝对是浏览器下一个让你激动的技术方向, 也许很快你就可以使用VR头显或者相关设备直接访问web内容和资源啦! 在这篇资源分享帖中,我们将介绍很多基于浏览器的VR演示和游戏,帮 ...
- javascript umd esm slim
在CDN的连接中看到多个连接时如何选择? JavaScript 模块现状 UMD和ECMAScript模块 https://cdn.bootcss.com/popper.js/1.13.0/esm/p ...
- 时间mysql
查询一天/今天: select * from table where to_days(column_time) = to_days(now()) select * from table where d ...
- IOS开发中xib和StoryBoard的优缺点
总所周知,苹果官方为IOS开发提供了3种制作UI方式,让我们能够快速开发漂亮APP界面,每一种方式都有他们各自的特点,谁也不能代替谁.但是国内开发人员为此时争得不可开交. 大家各说各有理,说都想说服谁 ...
- IsDebuggerPresent原理及其 c++实现
在IsDebuggerPresent下断,步入得到如下代码: 75 A1 | ] | eax:std::cout 75 | ] | eax:std::cout 75 | ] | eax:std::co ...
- Mac NVM 配置
1.NVM 简介 NVM(node version manager)是一个可以让你在同一台机器上安装和切换不同版本 node 的工具. GitHub 地址 2.NVM 环境配置 2.1 安装 NVM ...
- 开源自己写的Library到github,让别人或自己的项目依赖
对于不会git命令的自己,要上传项目或libary,看了本文,傻瓜式操作,绝壁简单! 新建一个空白工程 File-->New-->New module-->Android Libra ...
- R8500 MPv2 版本 刷梅林改版固件
由于R8500折腾起来比较繁琐.并且国内的koolshare上已经有人释出梅林改版移植的固件,主要是***更方便了,所以把R8500刷成了梅林固件,这是我第一次用上梅林固件. 刷机整个过程参考了下面的 ...