html5手机软键盘事件的简单介绍

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

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

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

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

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

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

相关问答

Q1: 手机端浏览器中的html搜索框如何响应软键盘搜索按钮事件?

1、在移动端，input框获取焦点时，浏览器会弹出软键盘，想让软键盘的enter键变成搜索两个字，需要让这个input按照这种结构写： 说明：onsubmit=return false；阻止表单默认提交，便于自己操作。 input 的 type 必须是 search。

2、方法1：将元素设置成 static 或者 relative ，不要脱离文档流。因为使用 fixed 或者 absolute ，会使得元素跟随 body 的底部移动，而安卓端软键盘将导致 body 高度变小而导致变形。

3、手机要调出软键盘，可以在任意一个文字输入框中点击一下，输入法的软键盘就会自动弹出。

4、在UC浏览器中进行搜索的方法相对直接和简单。用户只需在浏览器界面的搜索框内输入想要查询的关键词，然后点击搜索按钮，或者使用键盘上的回车键，即可在UC浏览器中进行搜索。

Q2: H5防止安卓手机软键盘弹出挤压页面导致变形的方法

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

2、最近在做基于H5开发的微信公众号前端页面时，使用input输入框来作为 laydate.js 日期插件的容器，在移动端需要禁用手机的软件盘。

3、这个应该是你的兼容问题了，你应该是设置了自适应，那么当键盘弹出的时候页面受到挤压，那么会进行一次自适应适配，当你的键盘收起的时候又得做一次适配，所以会出现这样的问。具体怎么解决这个要看你的实际情况了，但是应该就是这个问题引起。

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

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

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

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

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

5、通过以上三种方法，你可以轻松打开手机软键盘，进行输入操作。如果你还有其他问题，欢迎在百度搜索中输入相关关键词，获取更多帮助和解 在弹出的菜单选项中，选择“输入法”选项。软键盘是指在手机、平板电脑等触摸屏设备上显示的虚拟键盘。在使用这些设备时，我们经常需要打开软键盘进行输入操作。

6、手机要调出软键盘，可以在任意一个文字输入框中点击一下，输入法的软键盘就会自动弹出。

Q4: html5页面当中,打字时键盘把背景覆盖住了怎么办?

可以通过js控制，当用户点击输入框的时候，把弹层网上移动一点，修改值。

我们使用 H5 做移动 App，或者进行移动网站开发时。如果文本输入框在整个页面的下方，当我们点击输入框要输入文字时，系统弹出的虚拟键盘就会将输入框给挡住。

按住insert键即可。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法，代码块等，大幅提升HTML，js，css的开发效率。HBuilder是DCloud数字天堂推出的一款支持HTML5的Web开发IDE。

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

html5手机软键盘事件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、html5手机软键盘事件的信息别忘了在本站进行查找喔。