js判断手机端是否弹出软键盘

最新推荐文章于 2025-05-28 15:02:02 发布
原创 最新推荐文章于 2025-05-28 15:02:02 发布 · 1.9w 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在iOS和Android平台上，软键盘弹出时对页面布局的影响。具体表现为iOS设备上$('body').scrollTop()的变化及Android设备上$(window).height()的变化，并针对这些问题提出了监测键盘完全弹出的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

弹出软键盘时：

ios端$('body').scrollTop()会改变

android端$(window).height()会改变

其中android端的钉钉在拉起键盘时，不发生任何变化(貌似键盘是悬浮在body之上，所以很坑)

拉起键盘不是瞬间的，而是有个缓动过程

我们只要在input框focus的时候，开启定时器判断以上2点是否不再变化了，就可以断定拉起键盘结束了

Vue2 - 移动端H5网页点击输入框弹出软键盘后，收起后页面无法复原的问题，页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前（解决弹出键盘导致页面布局错乱，安卓+苹果ios）
资深程序员
04-07 8194
vue，移动端网页，输入框弹起软键盘，布局没有上移，弹出软键盘的时候页面顶起不恢复，实现移动端自动弹起软键盘，软键盘挡住输入框的解决方案，移动端技术问题 — H5页面底部弹出页input输入时整个弹出页被输入法顶起的解决方法，vue h5页面软键盘遮挡等，软键盘顶起页面，H5，input输入时，软键盘弹起不能自动收回，移动端软键盘监听弹出收起及影响定位布局，H5-input弹起键盘遮盖输入框，收起后导致页面无法复原的问题，输入框弹起软键盘，收起后导致页面无法复原的问题，移动端的软键盘对页面css布局影响的解
判断手机是否弹出键盘，改变了手机页面高度，对应inputStatus的状态改变相关控件的大小和位置
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
05-03 5077
inputResizeBodyHeight() { // 判断手机是否弹出键盘，改变了手机页面高度，对应inputStatus的状态改变相关控件的大小和位置 var oldHeight = document.documentElement.clientHeight || document.body.clientHeight; window.ad...
构建自定义JavaScript虚拟键盘输入框
最新发布
weixin_35835018的博客
05-28 826
自定义外观与功能是提升用户体验的关键，尤其是在虚拟键盘这样与用户交互频繁的应用中。本章将探讨如何实现键盘的主题切换，以及如何添加和优化扩展功能。添加自定义功能键需要一个明确的流程，使得用户能够轻松地添加新的按键。以下是添加自定义功能键的步骤：在界面中提供一个添加自定义键的入口。让用户为新键指定一个标识符和显示的文本。将该键添加到键盘布局中，并赋予一个默认的功能。允许用户通过代码编辑器自定义键的功能。
js对手机软键盘的监听
weixin_34095889的博客
06-13 443
js还没有办法对手机软键盘直接进行监听的，但是可以有其他角度来判断软键盘是否弹起。比如输入框是否获取焦点等。focusin和focusout支持冒泡，对应focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡，focus和blur不会冒泡，这样就可以使用事件代理，处理多个输入框存在的情况。 $(document).on('focusin'...
js判断软键盘是否开启弹出
weixin_30216561的博客
04-27 1136
移动端关于页面布局，如果底部有position:fixed的盒子，又有input，当软键盘弹出收起都会影响页面布局。这时候Android可以监听resize事件，代码如下，而ios没有相关事件。 var winHeight = $(window).height(); //获取当前页面高度 $(window).resize(function(){ var thisHeigh...
h5键盘收起弹出js判断方法
yzyblog的博客
08-21 3654
// 判断设备类型 var judgeDeviceType = function() { var ua = window.navigator.userAgent.toLocaleLowerCase(); var isIOS = /iphone|ipad|ipod/.test(ua); var isAndroid = /android/.te...
手机软键盘弹出时影响布局的解决方法
11-29
ios下点击输入框弹出软键盘时，布局没有大影响。 当输入框可能被软键盘压到时，在一部分安卓下却出了问题，华为自带浏览器和UC会有布局上的问题。 原因可能是因为，软键盘弹出时，改变了height，使height:100%,不能...
解决Android软键盘弹出覆盖h5页面输入框问题
01-20
在Android平台上，开发H5页面时常遇到一个问题：当用户点击位于页面底部或下方的输入框时，软键盘弹出会遮挡输入框，导致用户体验不佳。这个问题主要涉及到H5页面的布局、Android设备的交互特性以及浏览器的适配。...
el-select filterable模糊搜索在iOS手机上无法弹出软键盘，解决方案
zhangxueyou2223的博客
06-12 2041
前提：el-select filterable模糊搜索在iOS手机上无法弹出软键盘，在手机上使用时，iOS手机，该组件无法唤起软键盘，导致没法进行模糊搜素。于是。开始去找原因，发现主要是因为 组件中，上有一个属性，而该属性规定输入字段为只读。阻止了用户对值进行修改，直到满足某些条件才行。其在微信开发者工具上是可以模糊搜索，在手机上没法弹出软键盘搜素。
Html5页面上如何禁止手机虚拟键盘弹出
11-21
在大多数情况下，`readonly`属性能有效地阻止手机虚拟键盘的弹出，代码示例如下： ```html 不可编辑的输入框"> ``` 优点： 1. 实现简单，只需添加`readonly`属性。 2. 在大部分浏览器和设备上都能有效防止虚拟键盘...
实现监听软键盘弹出和隐藏状态
09-28
软键盘监听方法部署到基类，哪个页面有需求，直接调用基类中的方法，即可使用。
js监听键盘按下弹起
u014708123的博客
12-19 670
【代码】js监听键盘按下弹起。
js判断手机是否弹出软键盘
unique_jx的博客
10-27 7803
$(function(){ var winHeight = $(window).height(); $(".overimg").css({height:winHeight}); alert(winHeight); $(window).resize(function(){ alert("窗体高度被改变了"); }); })
JS判断手机是安卓还是IOS，以及监听软键盘弹出收起
marko_zheng的博客
09-02 1094
JS判断手机是安卓还是IOS，以及监听软键盘弹出收起 直接上代码，踩得坑都在代码里 var u = navigator.userAgent; //获取到的是个字符串，包括很多信息，我只匹配我想要的信息 var isAnd = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //判断是安卓手机 var isIOS = !!u.m...
js移动端监听软键盘弹出和收起事件
骑着代码去流浪
09-29 7149
在苹果手机上，当软键盘收起时输入框会失去焦点；但是在安卓实际上，键盘收起时输入框并不一定会失去焦点，但是会引起window的高度变化 因此，在安卓手机上可以通过window.onresize事件判断键盘收起还是弹出，在苹果手机上可以通过输入框失去和得到焦点事件来判断 //判断机型 var isAndroid = u.indexOf("Android") > -1 || ...
javascript检查android软键盘隐藏显示
tyasd
07-27 2850
javascript如何检查当输入框获取焦点弹出android软键盘时，如果点击的是键盘上的隐藏按钮隐藏键盘时，如何捕获点击隐藏按钮事件。 javascript检查android软键盘隐藏显示比较简单，主要是不好判断如果点击的是键盘上的隐藏按钮，因为keydown，keyup中获取不到按键的keyCode，获取到的都为0（可以获取到“前往”这个键的keyCode为13）。 ja
js监听移动端键盘弹出和收起事件
Tangsze的博客
03-02 5158
//这里区分不同系统 const ua = typeof window === 'object' ? window.navigator.userAgent : ''; let _isIOS = -1; let _isAndroid = -1; export function isIOS() { if (_isIOS === -1) { _isIOS = /iPhone|iPod|iPad/i.test(ua) ? 1 : 0; } return _isIOS === 1; }
js隐藏android软键盘,javascript检查android软键盘隐藏显示
weixin_35742852的博客
05-27 582
对于android软键盘弹出后，点击键盘上的隐藏按钮，可以用计时器检查window.innerHeight，如果改变，说明android软键盘收回隐藏了。htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">">javascr...
用HTML制作电脑软键盘的实践指南
在HTML软键盘的实现中，JavaScript用于处理按键点击事件、输入事件、键盘弹出与隐藏逻辑以及可能的字符替换逻辑。通过JavaScript，开发者可以实现一个功能完备的软键盘，它可以响应用户的点击、长按、拖拽等多种操作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值