点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )

测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框。

输入框固定在页面底部,如图所示:

input固定底部设计图.png

点击底部input输入框唤起软键盘时,软键盘挡住输入框。如图所示:


点击input键盘挡住图.png

测试过多台真机发现安卓的手机都不会出现这个问题,个别的iOS手机有问题。而且同一型号的苹果有的有问题有的没有问题。经过多方的归纳、总结惊奇的发现:会出现这个bug的苹果手机,使用的都是苹果第三方输入法,而使用苹果自带的输入法则没有这个bug。

出现这个bug的时候输入字符的时候,input输入框又会滚动上去。沿着这个思路往下想,我想到input获取焦点失败、滚动浏览器窗口或容器元素的问题。

解决这个问题的思路是,点击input输入框的时候,让其input滚动到当前div的顶部。于是我想到了Element.scrollIntoView() 方法。

DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域,各浏览器实现了相应的方法,可以使用不同的方式控制页面区域的滚动。这些方法作为HTMLElement类型的扩展存在,所以它能在所有元素上使用。

Element.scrollIntoView()语法:
<code>
element.scrollIntoView(); // Equivalent to element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean arguments
element.scrollIntoView(scrollIntoViewOptions); // Object argument
</code>

参数:alignToTop(可选)
<code>
Is a Boolean value:
If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. This is the default value.( 如果alignToTop为true,该元素的顶部将对齐的滚动的祖先的可见区域的顶部。这是默认值。)
If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor.(如果alignToTop false, 该元素的底部将对齐的滚动的祖先的可见区域的底部。)
</code>

点击input底部输入框,软键盘挡住输入框的解决办法是,点击输入框的时候给input绑定事件,使用 Element.scrollIntoView()方法使元素弹到祖元素可见区域的顶部。代码如下:
<code>
$("input").on("click", function() {
var target = this;
setTimeOut(function() {
target.scrollIntoView(true);
}, 100);
})
</code>


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364049.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java采集温湿度水浸_机房水浸传感器:智能生活不可或缺的漏水传感器

原标题&#xff1a;机房水浸传感器&#xff1a;智能生活不可或缺的漏水传感器智能化的飞速发展让人们的生活发生了重大改变&#xff0c;为保证机房的安全、稳定、高效运行&#xff0c;网络设备的良好运行状态和设备使用寿命与安全&#xff0c;通常会对网络运行环境的电力供应、…

以编程方式访问Java基本类型的大小

许多不熟悉Java的开发人员首先要了解的一件事是Java的基本原始数据类型 &#xff0c;其固定&#xff08;与平台无关&#xff09;的大小&#xff08;以位或字节为单位用二进制补码表示 &#xff09;以及它们的范围&#xff08;Java中所有数字类型都是带符号的&#xff09; &…

oracle用EXPLAIN PLAN 分析SQL语句

EXPLAIN PLAN 是一个很好的分析SQL语句的工具,它甚至可以在不执行SQL的情况下分析语句. 通过分析,我们就可以知道ORACLE是怎么样连接表,使用什么方式扫描表(索引扫描或全表扫描)以及使用到的索引名称. 你需要按照从里到外,从上到下的次序解读分析的结果. EXPLAIN PLAN分析的结果…

创建型模式:原型模式

个人公众号原文&#xff1a;创建型模式&#xff1a;原型模式 五大创建型模式之五&#xff1a;原型模式。 简介 姓名 &#xff1a;原型模式 英文名 &#xff1a;Prototype Pattern 价值观 &#xff1a;效率第一 个人介绍 &#xff1a; Specify the kinds of objects to create u…

我的前端工具集(五)提示工具之模态窗提示

我的前端工具集&#xff08;五&#xff09;提示工具之模态窗提示 liuyuhang原创&#xff0c;未经允许禁止转载 目录 我的前端工具集 1、需求 很多页面操作都需要提示&#xff0c;比如操作成功&#xff0c;操作失败之类。 总不能没事就console.log或者alert吧。 所以一个操作提…

min-width:100%和max-width:100%的区别

1.width:100%和width:auto width:100%,设定对象的宽度占父元素的100%不论设定元素的margin值是多少,不包含margin&#xff1b; width:auto&#xff0c;根据设定对象的实际大小而自适应宽度&#xff0c;考虑设定元素的Margin值得大小&#xff0c;包含Margin 2.max-width:100%和m…

Java 8 Friday:可选将保留为Java中的一个选项

在Data Geekery &#xff0c;我们喜欢Java。 而且&#xff0c;由于我们真的很喜欢jOOQ的流畅的API和查询DSL &#xff0c;我们对Java 8将为我们的生态系统带来什么感到非常兴奋。 Java 8星期五 每个星期五&#xff0c;我们都会向您展示一些不错的教程风格的Java 8新功能&#…

java动态拼接请求_在JavaWeb项目中处理静态文件或动态链接拼接网站地址的最优处理方案...

在开发网站时候我们会遇到下面问题&#xff1f;- 在引用网页中引用js和css或者动态的Servlet的时候我们是写绝对路径还是相对路径&#xff1f;- 如果写相对路径吧&#xff0c;上线偶尔会报404&#xff0c;还要手动去拼接绝对路径- 如果写绝对路径吧&#xff0c;你在本地写的时候…

新增数据库栏位脚本

IF NOT EXISTS(SELECT * FROM SYSCOLUMNSWHERE IDOBJECT_ID(NMNDIndicator) AND NAMENcheckperiod)BEGINALTER TABLE MNDIndicator ADD checkperiod NVARCHAR(100) NULL default END 转载于:https://www.cnblogs.com/snowball/archive/2007/05/14/745213.html

七天开发记录(3)

今天在网上找到了一个开发记账本微信小程序的网址 我看了一下这个APP的源代码&#xff0c;其用分为两个大包。 转载于:https://www.cnblogs.com/zjl-0217/p/10428525.html

做个商城吧(〇)

做个商城吧&#xff08;〇&#xff09; liuyuhang原创&#xff0c;未经允许进制转载&#xff01; 作为自己想写的一个系列&#xff0c;应该仔细认真的更下来 目录在文末 1、想法 自己一个人做个商城&#xff0c;这种想法一直萦绕着。 但是也有不同的声音&#xff1a; 有淘宝&am…

链表!比数组更适合做增删操作的数据结构

什么是链表&#xff1f; 链表和数组的对比&#xff1a;在大多数语言中&#xff0c;数组的大小是固定的&#xff0c;从数组的起点或中间添加或删除元素的成本很高&#xff0c;因为需要移动元素。链表中的每一个元素在内存中不是连续放置的&#xff0c;和它左右两侧元素是没有关系…

Java 8中的Base64 –加入乐趣为时不晚

最后&#xff0c;Java 8发布了。 最后&#xff0c;有一种执行Base64编码的标准方法。 长期以来&#xff0c;我们一直依赖于Apache Commons Codec&#xff08;无论如何还是很棒的&#xff09;。 内存敏感的编码人员将拼命使用sun.misc.BASE64Encoder和sun.misc.BASE64Decoder&am…

多层架构模型中的BLL 与 Model的解释

理想状态这两个可以合并到一起来&#xff0c;就是业务对象&#xff0c;但model是把这个业务对象中的数据提取了出来&#xff0c;作为一个数据载体&#xff0c;可以在层间传递。业务对象中除去这些数据剩下的方法就构成了BLL层。显示层Presentation Layer业务逻辑层Business Log…

java创建方法并引用_java – 创建非捕获方法引用,它将调用超类方法

我正在尝试重构以下代码&#xff1a;class Base {private Object a, b, <...>; // theres like 10 of these attributes of different typepublic Object a() {return a;}public Object b() {return b;}// more getters like the ones above}class RootNode extends Base…

maven快速入门

一。前提条件 你的电脑必须安装maven和java 二。检验安装 执行命令&#xff1a;mvn --version 输出&#xff1a; Apache Maven 3.6.0 (97c98ec64a1fdfee7767ce5ffb20918da4f719f3; 2018-10-24T20:41:4702:00) Maven home: D:\apache-maven-3.6.0\bin\.. Java version: 1.8.0_16…

如何使用JSR107缓存注释

最近&#xff0c;我对JSR107缓存注释以及JSR107的实现是否提供它们有一些疑问。 可以将缓存注释添加到Java类中&#xff0c;并将其作为方法调用缓存操作。 例如&#xff0c;下面是带注释的BlogManager。 CacheDefaults(cacheName "blgMngr") public class BlogMan…

js之作用域

1.什么是作用域 作用域是用于收集存储维护变量&#xff0c;以及当前执行代码声明的变量所拥有的权限&#xff0c; 例如 &#xff1a; function foo(a){ console.log(a); -------- 1 }; foo(666); console.log(a); ------- 2 此时执行该段代码 1 -- 处打印我们得…

TMS320F28335——IO控制/定时计操作

一、实现GPIO控制 1.硬件连接 从电路原理图上看来&#xff0c;LED灯是接在GPIO34 上的。 2.IO设置 2.1设置功能 GPXMUX1/2&#xff1a;功能选择寄存器   GPXMUX1/2 每组 IO 一般有 32 个 IO 口可以配置。GPXMUX1 对应每组的低 16 个 IO 口&#xff0c;GPXMUX2 对应高 16 个…

网页弹出窗口代码【来源于网络】

网页弹出窗口代码 1、最基本的弹出窗口代码 其实代码非常简单&#xff1a; < SCRIPT LANGUAGE"java script"> < !-- window.open ("page.html") --> < /SCRIPT> 因为这是一段java script代码&#xff0c;所以它们应该放在< SCRIPT L…