html5监听键盘弹出，vue监听键盘弹起

h5开发,focus调不起键盘

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

2、即 在a页面不展示此组件 但是要在点击事件触发跳转到b页面之前，将a组件的光标聚焦---focus方法。在b页面也同时使用此组件即可 只是在b页面要把输入框样式改为正常样式。（若有c页面返回到b页面，需要拉起键盘。

3、当调用 input控件的focus()方法时，如果readOnly属性为true，那么不会弹出键盘，但是焦点已经在 input控件上了。这个时候，再将readOnly属性设置为false，那么这个时候键盘不会弹出，但是可以扫描枪输入了。

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

5、在H5页面设计过程中，Android手机经常遇到数字键盘遮住输入框的问题，该问题无法使用focus事件来进行解决，因为当把数字键盘折叠之后，再次点击输入框时无法触发focus事件。

相关问答

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

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

原理：自定义布局的onSizeChanged()方法，在其中增加一个监听接口，当软键盘显示或隐藏使得布局尺寸发生改变，就能捕获到这个事件。

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

那么我们就从上到下，具体的看看事件的传递机制。如下图所示，用户点击后，软键盘或物理按键的输入驱动就会产生一个中断，且向/dev/input/event*中写入一个相应的信号量。

IOS端： 苹果的软键盘是覆盖的（分层），因此H5页面显示没有什么问题。安卓端解决input键盘弹出导致页面压缩变形的方法为：方法1：将元素设置成 static 或者 relative ，不要脱离文档流。

Q2: js怎么监听移动端键盘展开事件

1、当虚拟键盘弹出的时候，window的resize事件会被触发，问题里的input是使用position：fixed吗，如果是position： fixed，在resize触发时应该会自动调整位置吧。

2、在 `keydown` 事件监听器中，我们检查标志变量是否为 `false`，如果是，则表示这是第一次按下按键，我们将标志变量设为 `true`，并将 `startTime` 设置为当前时间。

3、js和jquery没有类似的监控功能，可以给你提供两种思路。可以判断输入框的焦点事件 可以用jquery的resize()方法，浏览器窗口大小改变时会触发。

4、由于硬件的限制，如果同时按下q键和s键，会连续触发两次键盘事件，所以严格来讲所谓的“非ctrl alt shift的组合键”并不是真正的组合键，只是相当于快速地连续按了两个键而已。

5、是的。在iphone手机中，vue提供的keyup事件是不能监听iphone键盘的。监听就是JavaScript可以在某一事件被触发时，执行一段预设的逻辑代码。

6、当按钮被按下时，发生 keydown 事件。keydown()方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。

Q3: 如何监听软键盘的弹出,隐藏

InputMethodManager有一个方法isActive（View view）：如果view是输入法的活动view，则返回true。也就是说，如果是由view触发弹出软键盘，则返回true。

如果我们设置的模式为压缩模式，那么我们可以对布局的onSizeChanged函数进行跟踪，如果为平移模式，那么该函数可能不会被调用。

具体方法如下：首先，在清单文件Manifest.xml中的对应的Activity标签内设置 android：windowSoftInputMode=”adjustResize”作用是当软键盘显示或隐藏时，该Activity主窗口总是会被调整大小以便留出软键盘的空间。

//窗口发生改变(大)，故此时键盘弹出 //当软键盘弹出，在这里面操作 }else{ //窗口发生改变(小)，故此时键盘收起 //当软键盘收起，在此处操作 } })；方法二：监控键盘。

实际上，当设置为adjustResize后，软键盘弹出时，要对主窗口布局重新进行measure和layout，而在layout时，发现窗口的大小发生的变化，因此调用了onSizeChanged。

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

横屏时，点击输入框出现全键盘解决方案： 在EditText、searchview等控件中加 android：imeOptions=flagNoExtractUi竖屏时，安卓会出现半屏。case1：你的输入框处于中下的位置，这样的话，键盘可能挡住输入框。

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

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

ios平台，app内嵌h5，当软键盘弹出再收起时，页面布局是错乱的。直接表现是当点击其他元素时，却导致了某个文本框聚焦。解决方案：文本框focus（聚焦）时软键盘弹出，blur（失焦）时软键盘收起。

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

1、问题和解决原理：部分ios手机在收起手机软键盘后，弹起软键盘的位置留白占位。监听输入框失去焦点，窗口回到顶部，迫使界面恢复正常。

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

3、IOS端： 苹果的软键盘是覆盖的（分层），因此H5页面显示没有什么问题。安卓端解决input键盘弹出导致页面压缩变形的方法为：方法1：将元素设置成 static 或者 relative ，不要脱离文档流。

关于html5监听键盘弹出和vue监听键盘弹起的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。