移动端h5监听键盘弹出和收起

最新推荐文章于 2024-08-22 09:50:47 发布

艾欢欢

最新推荐文章于 2024-08-22 09:50:47 发布

阅读量2.5k

点赞数

分类专栏：移动端H5 JavaScript 文章标签：键盘弹出和收起 onresize focusout focusin

本文链接：https://blog.csdn.net/AiHuanhuan110/article/details/102861506

版权

本文介绍了在移动端H5中如何监听键盘的弹出和收起。在iOS设备上，可通过监听输入框的focusout和focusin事件来判断键盘状态变化，而在Android设备上，则可以利用onresize事件监测window高度变化来实现键盘的监听。

摘要由CSDN通过智能技术生成

在ios中软键盘弹起时，仅会引起 $('body').scrollTop 值改变，但是我们可以通过输入框的获取焦点情况来做判断，但也只能在ios中采用这个方案，因为在android中存在主动收起键盘后，但输入框并没有失焦，而ios中键盘收起后就会失焦；

在android中软键盘弹起或收起时，会改变window的高度，因此监听window的 onresize 事件；

一、Android端监听

//获取原窗口的高度
let originalHeight = document.documentElement.clientHeight || document.body.clientHeight
window.οnresize =

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

艾欢欢

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

html5手机键盘弹出收起的处理

11-21

前言：前端时间也是应项目的需求开始了h5移动端的折腾之旅，在目前中台的基础上扩展了两个ToC移动端项目，下面就是在h5移动端表单页面键盘弹出收起兼容性的一些总结。问题在 h5 项目中，我们会经常遇到一些表单页面，在输入框获取焦点时，会自动触发键盘弹起，而键盘弹出在 IOS 与 Android 的 webview 中表现并非一致，同时当我们主动触发键盘收起时也同样存在差异化。键盘弹出 IOS：IOS系统的键盘处在窗口的最上层，当键盘弹起时，webview 的高度 height 并没有改变，只是 scrollTop 发生变化，页面可以滚动。且页面可以滚动的最大限度为弹出的键盘的高度

H5监听键盘弹起收回，用法超简单！兼容Android、iOS。

HuaiCheng9067的博客

12-15

5283

引入以下代码，仅需2行代码即可监听！ /** * 兼容Android、iOS各浏览器 * H5键盘监控弹出（KeyboardUp）、收起（KeyboardDown）事件定义 * auth: huaicheng151201@163.com * time: 2020.11.20 * 用法： * 与click事件的绑定用法无异，如： window.addEventListener("KeyboardUp",function() { //键盘弹起来了 },false)

参与评论您还未登录，请先登录后发表或查看评论

H5移动端监听软键盘弹起、收起

yiguoxiaohai的博客

07-19

4924

H5 有时底部按钮是固定定位，当页面上面需要用到输入内容时，会弹起软键盘，然后把底部固定的按钮也弹起来了，我们希望弹起软键盘时，底部的固定定位按钮隐藏，这里就需要对移动端软键盘弹起收起进行监听。.....................

APP内嵌H5，input弹出键盘后页面底部空白

最新发布

不想敲代码的前端的博客

08-22

216

4、设置input的blur事件，在页面初始化的时候获取页面的高度，当收起键盘时，input输入框会触发失焦事件，所以在blur事件中执行 window.scrollTo(x,y) 方法，y是初始化时获取到的页面高度，这样在收起键盘后页面就不会卡住留下一个大空白了。h5是uniapp的项目，场景是app项目中内嵌h5页面，IOS手机在点击输入框后，底部键盘弹出，页面整体上移。1、根据uniapp官网的说明，设置页面中键盘的弹出方式。2、监听页面的尺寸变化，在变化时改变页面的高度。

h5(移动端) 监听软键盘弹起、收起

qq_46302247的博客

03-28

8079

https://blog.csdn.net/qq_38296051/article/details/109290225 https://blog.csdn.net/qq_42231156/article/details/103490964 https://www.cnblogs.com/rachelch/p/12858938.html ** 1、安卓键盘弹起会触发页面的resize 事件（ios不会），所以可以通过判断页面高度的前后变化来判断键盘的状态。 2、 ios 在键盘收起的时候input 会失去焦

h5底部输入框被键盘遮挡_总结几个移动端H5软键盘的大坑【实践】

weixin_39733232的博客

10-19

1331

转载链接：https://segmentfault.com/a/11900000221151771、部分机型软键盘弹起挡住原来的视图解决方法：可以通过监听移动端软键盘弹起Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。参数如下。true，表示元素的顶部与当前区域的可见部分的顶部对齐false，表示元素的底部与当前区域的可见部分的尾部对齐Element...

移动端h5唤起键盘_移动端中 H5输入框在弹起键盘后被遮挡

weixin_39652154的博客

12-20

1295

页面在app中与不在的对比可见，键盘遮盖住了这个输入框，而且此时不能滚动，而按钮的设计为始终置底置底的按钮为fixed布局，观察得知，这样当键盘弹起时，其实页面的高度被缩短成类似于这样app中这样，始终置底的元素会遮盖住输入框，并且由于界面并没有长到可以滚动的地步，输入框非常正常地被遮住了【解决办法】第一种(兼容性优先)：首先，把置底元素设置成，在页面的底部而非屏幕的底部.page .bottom...

小程序(React)H5移动端如何监听软键盘弹起、收起

weixin_50236973的博客

05-18

1609

【代码】小程序(React)H5移动端如何监听软键盘弹起、收起。

监听软键盘的弹出与收起（近乎完美的）

04-24

在Android开发中，软键盘的弹出与收起是一个常见的需求，特别是在输入框交互和界面布局自适应时。本文将详细介绍三种实现软键盘监听的方法，帮助开发者选择最适合自己的方案。一、方法一：使用InputMethodManager...

解决Android软键盘弹出覆盖h5页面输入框问题

08-27

开发者可以通过监听软键盘弹出事件来调整页面布局和样式，以解决软键盘弹出问题。知识点六：h5页面中输入框的布局和样式 h5页面中输入框的布局和样式对软键盘弹出问题的影响很大。输入框的位置、大小和样式都会...

vue实现移动端H5数字键盘组件使用详解

10-14

在Vue.js中实现移动端H5数字键盘组件是一个常见的需求，特别是在开发支付或输入数字的场景中。本篇文章将深入解析如何构建这样一个自定义组件，并提供详细的代码示例，以帮助开发者理解和实现自己的数字键盘组件。 ...

移动端H5商城模板源码-34个页面

09-07

在IT行业中，移动端H5商城模板源码是开发者和设计师常用的一种资源，它能快速构建一个功能完善的在线购物平台。本资源"移动端H5商城模板源码-34个页面"是一个基于原生HTML和JavaScript技术开发的商城类H5应用模板，...

H5移动端弹出键盘时遮挡输入框

热门推荐

qq_37231097的博客

08-03

2万+

在写移动端时，如果使用绝对定位Fixed将输入框（input或者textarea）,当手机的输入法为自带输入法时可能问题不大，但是当使用类似搜狗等输入法时，由于会高出自带输入法大约30个像素，就会造成输入框被遮盖一部分的现象，很尴尬。下边简单说说简单的解决思路，当然还有复杂的。延时一定时间重新定位输入框。点击输入框时加长body元素高度到9999px（当然不一定非要这么高），页面滚动到空白区域，

JS 在客户端监听键盘的弹出和收起

cency_chen的博客

07-30

605

需求：在input输入完成后请求接口 1.在iOS中，input输入完成收起键盘，input框会失焦，所以将接口请求放在input的blur事件中就可以实现 2.在android中，收起键盘input框不会失焦，但我还是希望收起键盘时去做请求而不是一定时间内没有输入就去请求 3.键盘的弹出和收起会改变window的高度，所以可以通过window的高度来监听键盘有参考网上其他人的做法 a...

.h5底部输入框被键盘遮挡问题，或者底部导航栏被弹起问题的解决办法

qq_38751315的博客

04-10

2277

在h5页面中，当输入框在最底部，点击软键盘会出现输入框会被遮挡问题，或者是底部有一个固定定位的导航，然而每次一点击输入框，弹出输入法的时候，这个底部的导航会随着输入法被顶上去问题。解决办法：由于弹起输入法，会执行onresize 事件，根据窗口变化，将原先是固定定位的元素改为position:static;。当关闭输入法时再切换回position:absolute;。 var getHeight = $(document).height(); $(window).resize(function(){

解决uniapp H5端监听键盘的弹出，收起执行其他操作

lijinjian168的博客

12-01

3465

【代码】解决uniapp H5端监听键盘的弹出，收起执行其他操作。

H5移动端监听键盘弹出收起visualViewport

weixin_39137100的博客

03-14

914

H5移动端监听键盘弹出收起visualViewport // 获取页面的可视高度 const originHeight = document.documentElement.clientHeight || document.body.clientHeight const resizeHandler = () => { // 页面大小发生改变重新获取可视窗口的高度 const resizeHeight = document.documentElement.client

移动端H5页面在input输入框获得焦点时禁止唤起键盘

相濡以沫不如相忘于江湖.

12-23

6179

点击开始时间或者结束时间时会弹出日期选择器，这个时候呢在手机上看的话，会同时触发键盘，导致键盘弹出来，在网上找了半天终于找到了一个满足我业务需求的解决办法。当input输入框获得焦点时，在保留光标的情况下，又不让手机虚拟键盘弹起。哈哈哈哈我又来了，又是java安卓应用嵌入H5页面，给大家看下效果。写完之后就不会再唤醒手机键盘了！

（小技巧）h5 手机键盘弹出收起的处理

前端达人

04-07

6914

本文转载于思否社区专栏：随笔作者：hzzly前言：前段时间也是应项目的需求开始了 h5 移动端的折腾之旅，在目前中台的基础上扩展了两个 ToC 移动端项目，下面就是在 h5 移动端表单...

vue3 h5 监听键盘的弹起与收起

04-18

对于vue3 h5监听键盘的弹起与收起，我们可以使用window对象的resize事件和document对象的focusin和focusout事件来实现。具体方法可以参考以下代码： // 监听键盘弹起函数 function onKeyboardShow() { //...处理键盘弹起事件 } // 监听键盘收起函数 function onKeyboardHide() { //...处理键盘收起事件 } // 监听窗口大小改变事件 window.addEventListener('resize', () => { if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') { if(document.body.scrollTop > 0) { // IOS系统自带输入法 onKeyboardShow(); } else { // 安卓系统自带输入法 onKeyboardHide(); } } else { onKeyboardHide(); } }); // 监听input和textarea获取焦点事件 document.addEventListener('focusin', () => { onKeyboardShow(); }); // 监听input和textarea失去焦点事件 document.addEventListener('focusout', () => { onKeyboardHide(); });