html5监听键盘收起，js监听键盘输入

移动端H5软键盘的问题

1、IOS端： 苹果的软键盘是覆盖的（分层），因此H5页面显示没有什么问题。安卓端解决input键盘弹出导致页面压缩变形的方法为：方法1：将元素设置成 static 或者 relative ，不要脱离文档流。因为使用 fixed 或者 absolute ，会使得元素跟随 body 的底部移动，而安卓端软键盘将导致 body 高度变小而导致变形。

2、【二】是否减少活动主窗口大小以便腾出空间放软键盘 它的设置必须是下面列表中的一个值，或一个”state…”值加一个”adjust…”值的组合。在任一组设置多个值——多个”state…”values，例如&mdash有未定义的结果。各个值之间用|分开。

3、软键盘未被弹出。移动端h5页面在软键盘弹出后，body的高度被压缩了，就导致原本高度100%的背景图被顶上去一截，如果软键盘未被弹出，那么背景图就会保持不变。H5是由搜狗输入法趣味表达平台字媒体开发，联合中华好诗词共同推出的。

4、H5 并没有直接监听软键盘的原生事件。H5 并没有直接监听软键盘的原生事件，只能通过软键盘弹起或收起，引发页面其他方面的表现间接监听，曲线救国。

相关问答

Q1: ios软键盘弹出再收起,页面布局错乱问题解决

1、在IOS上，输入框获取焦点，键盘弹起，页面（webview）整体往上滚动，当键盘收起后，不回到原位，导致键盘原来所在位置是空白的。使用第三方输入法，高度计算存在偏差，导致在有些输入法弹起，将输入框挡住一部分。

2、IOS端： 苹果的软键盘是覆盖的（分层），因此H5页面显示没有什么问题。安卓端解决input键盘弹出导致页面压缩变形的方法为：方法1：将元素设置成 static 或者 relative ，不要脱离文档流。因为使用 fixed 或者 absolute ，会使得元素跟随 body 的底部移动，而安卓端软键盘将导致 body 高度变小而导致变形。

3、界面显示的扭曲啊，后来找到一种解决方法，在相应的activity中（比如我这是tab的activity，用的是adjustpan）添加android：windowSoftInputMode这个属性，下面详细说下这个属性：&X！Q6c9}%i.]6@0YN6^d{XwindowSoftInputMode属性设置值说明。

4、使用了uni-popup和uni-popup-dialog的input模式，查看官方提供的接口，发现没有修改聚焦的接口，于是修改了uni-popup - components - uni-popup-dialog - uni-popup-dialog.vue的 mounted() 方法内的 this.focus 为 false 作为暂时解决方法。在解决过程中通过搜索并没有查到相关内容，遂做记录。

5、解决办法是，把 i.line 拿出来，和div同级。 1 background：url() no-repeat center， url() no-repeat center； 可以一次性放两个图片，中间用逗号隔开。 1关于移动端软键盘弹起，盖住页面的问题。

6、目的 ： 监听移动端键盘展开事件工具 ： 移动端， js思路 ： 可以通过监听窗口大小的改变来实现，当端键盘展开时，窗口的大小发生改变，依据此基础进行判断.blockquotejs 移动端关于页面布局，如果底部有position：fixed的盒子，又有input，当软键盘弹出收起都会影响页面布局。

Q2: 做HTML5页面时怎么判断手机软键盘是否隐藏

给输入框放在html这层，然后给html相对定位，height：100%；width：100%，再给输入框绝对定位到bottom：0；left：0；这时候输入框在键盘弹出的时候会跳到输入框的上面。

InputMethodManager有一个方法isActive（View view）：如果view是输入法的活动view，则返回true。也就是说，如果是由view触发弹出软键盘，则返回true。if(isActive（edittext）)隐藏键盘 接着让另一个view强制获取焦点，这样isActivite(ediitext)就为false.这个方法比较简单，代码比较短，也很好理解。

Android中判断软键盘是否弹出或隐藏可以借助软键盘显示和隐藏时，对主窗口进行了重新布局这个特性来进行侦听。如果我们设置的模式为压缩模式，那么我们可以对布局的onSizeChanged函数进行跟踪，如果为平移模式，那么该函数可能不会被调用。

模式一，压缩模式 windowSoftInputMode的值如果设置为adjustResize，那么该Activity主窗口总是被调整大小以便留出软键盘的空间。我们通过一段代码来测试一下，当我们设置了该属性后，弹出输入法时，系统做了什么。

Q3: H5如何对android和ios手机软键盘的监听

1、首先，在清单文件Manifest.xml中的对应的Activity标签内设置 android：windowSoftInputMode=”adjustResize”作用是当软键盘显示或隐藏时，该Activity主窗口总是会被调整大小以便留出软键盘的空间。唯有这样才能保证布局触发onSizeChanged()方法。

2、在Android和 IOS 上，获知软键盘弹起和收起状态存在差异，事件不同。在IOS上，输入框获取焦点，键盘弹起，页面（webview）整体往上滚动，当键盘收起后，不回到原位，导致键盘原来所在位置是空白的。使用第三方输入法，高度计算存在偏差，导致在有些输入法弹起，将输入框挡住一部分。

3、如下图所示，用户点击后，软键盘或物理按键的输入驱动就会产生一个中断，且向/dev/input/event*中写入一个相应的信号量。Android操作系统则会循环的读取其中的事件，再分发给WindowManagerServer。

4、Android官网的Api 如果需要监听软键盘的右下角的按键，需要为EditText设置setOnEditorActionListener()监听：上面的方式，只是展示了如何监听各个按键的方法，如果需要消费事件，则需要return true。(1)第一次写这么长的博客，感觉会有一些不足，各位看官如果有不合理的地方，或者有误的地方请直接指出。

html5监听键盘收起的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js监听键盘输入、html5监听键盘收起的信息别忘了在本站进行查找喔。