解决ios部分手机键盘弹起导致input无法聚焦的bug

最新推荐文章于 2022-10-21 13:58:06 发布
最新推荐文章于 2022-10-21 13:58:06 发布
阅读量7.2k 收藏 5
点赞数 1
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/THINK_OF_/article/details/84938833
版权

环境：微信浏览器

场景：我们的登录页面，两个输入框，点击获取验证码，弹出一个弹层，弹层采用fixed布局，弹层元素是输入框来输入验证码的

问题：点击弹层input获取焦点后，键盘自动弹起，把页面顶起来了，当点击弹层中处input外区域，键盘自动收起，弹层输入框恢复原位，但是无法聚焦，形成一个bug

测试：测试过程中发现键盘收起后的输入框无法聚焦，但是在之前被键盘顶起来的位置点击居然有效，键盘再次弹起，故猜测时webview的内部scrollview自己实现的键盘弹起上滚页面，但是键盘收起时页面没有回滚，只是因为定位的关系页面虽然还原，但是scrollview没动，导致点击元素还停留在键盘弹起的地方

解决：监听input的blur事件，执行window.scroll(0,0)让页面还原到初始位置

THINK_OF_
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue h5移动端Ios软键盘遮挡input输入框导致页面不能自动向上滚动的bug
闫瑞锋的博客
07-22 1984
关键代码 window.addEventListener('resize', function() { if ( document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' ) { window.setTimeout(function() { if ('scrollIntoView' in document.activeElement
iphone打开vue项目输入框不能获得焦点，也不能输入内容
卡卡西：一个擅长拷贝的前端程序员
09-29 7739
问题描述： 使用vue开发的项目，其中有需要输入手机号，验证手机验证码的功能，但是发现iphone打开时，点击输入框，可以调起输入法，但是无法显示输入光标，也不能输入内容（不能获取input框输入焦点） 问题产生原因： css样式设置中的某些会产生影响，如-webkit-touch-callout：none； 问题解决： 检查样式中是否有如下设置 {         -web...
手机软键盘弹出时影响布局的解决方法
11-29
移动端软键盘弹出时影响布局该如何解决 1）前段时间作的移动端页面，因为高度只有1页所以用了height:100%;width:100%; ios下点击输入框弹出软键盘时，布局没有大影响。 当输入框可能被软键盘压到时，在一部分安卓下却出了问题，华为自带浏览器和UC会有布局上的问题。 原因可能是因为，软键盘弹出时，改变了height，使height:100%,不能达到原来的高度。 解决办法： $(document).ready(function () { 　　$('body').height($('body')[0].clientHeight); }); 页面加载完后，js给body一个定高。
ios input 无法自动聚焦拉起手机键盘
supming1的专栏
09-07 1156
ios input 无法自动聚焦拉起手机键盘
React+Taro h5 解决ios机型input无法自动聚焦的问题
爱拼才会赢～的博客
03-10 2916
#####1、原因 在ios12系统以上版本，苹果端考虑到用户的安全性和体验方面的因素，所以不支持input框的自动聚焦 #####2、方案 需要用户主动触发事件才可以使 focus生效 #####3、需求 首页顶部有个搜索框，点击进去搜索页，自动聚焦并弹起键盘 #####4、思路 首先封装一个搜索功能的组件，其次在全局app.js中引入，因为是在全局引入的，所以每个页面的顶部都会出现搜索框，这样就可以解决ios机型无法聚焦的问题。 然后我们通过EventEmitter来进行页面通信，来根据实际需求判断不
获取焦点不触发键盘，不显示系统键盘
wsy157的博客
02-21 2385
获取焦点不触发键盘，不显示系统键盘 #HTML代码 <input type="text" name="cc" id='inputId' v-model="vAliaName" readOnly='readOnly' @blur="onBlur" @focus="getFous" autocomplete="off" autofocus> #js代码 mounted(){ document.getElementById('inputId').focus(); setTimeout
html5 自动弹出键盘,HTML5 input焦点键盘弹出问题
weixin_30476025的博客
05-31 1926
最近项目有个需求，我们使用的是PDA装置，它有扫描枪，可以让扫描出来的内容填写到html的input控件中。但是有一个棘手问题，就是input控件只要获取焦点，就会弹出键盘。这一点与android原生控件不同，原生控件EditText调用它的requestFocus()，只会聚焦，不会弹出键盘。而html的input控件，只要调用它的focus()方法，就会弹出键盘。项目的需求，希望刚开始时，只是...
解决vue js IOS H5focus无法自动弹出键盘的问题
10-18
通过上述方法，开发者可以解决iOS上的H5页面中input元素聚焦时键盘不自动弹出的问题，从而提升用户体验。需要注意的是，这样的解决方案是通过诱导用户点击一个显眼的按钮来实现的，它满足了iOS平台的交互逻辑。在...
iOS项目开发键盘弹出遮挡输入框问题解决方案
01-05
UITextField和UITextView，前者是单行输入文本框，后者是可滑动的多行输入文本框，在这整个开发过程中，我们需要控制键盘的弹出和收起、在输入结束的时候获取输入的信息，此外，我们还需要保证在键盘弹起的时候不...
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
12-11
前言：微信H5项目，ios端出现了软键盘输完隐藏后页面不会回弹，下方会有一大块留白 最近微信和ios都有版本升级，不知道是哪边升级造成的，但是经过测试，软键盘收起后，再滚动一下页面，下面的留白就会消失。所以...
解决手机端input失焦后页面不还原和android软键盘出现后挤压页面问题
rouduo_zjy的博客
11-21 814
input失去焦点后使用window.scroll属性页面可以回到指定地 手机端页面输入框失去焦点后页面不会自动还原的解决方法 //input框失去焦点后页面回到（0,0） $("input").on("blur",function(){ window.scroll(0,0); }); //textarea框失去焦点后页面回到（0,0） $("textarea").on("blur",fun...
如何在IOS系统中实现输入框自动聚焦并调起键盘
qq_42931285的博客
03-05 3755
ios有个安全机制，只有用户点击才能调起键盘（说白了就是让用户点一下才能调起）； 所以ios的解决方法是 ：第一个页面写个input，先把键盘调起来，当点击搜索中在click事件中写： this.$refs.focusInput(之前通过ref绑定在input上).focus,然后再进行路由跳转。 然后第二个页面绑定自动聚焦的方法就可以聚焦了。注：也是触发focus事件。 若第一个页面中没有input框，可以考虑使用动态创建一个元素，类似之前下载文件创建a标签操作再销毁。 若是使用绝对定位，将z-index
解决Vue 移动端在iOS中点击多次输入框才能聚焦的问题
迪丽热bug的博客
12-05 1140
解决Vue 移动端在iOS中点击输入框无法聚焦问题 在移动端开发过程中，都是通过控制台去改变屏幕大小调试页面，基本上不会去考虑唤起键盘的问题，在ios端唤起键盘会有一定时间的延迟，点击输入框不能聚焦，或者点击多次才能聚焦的问题，解决方法如下 引入 npm fastclick 插件 打开cmd cd到项目里. npm install fastclick -S 在main.js中全局引入 // 引入 fastclick 并重写其 focus 方法 import FastClick from 'fastclic
ios移动端软键盘收起后input输入框焦点错位或无法输入解决
miracle_mf的博客
09-17 1951
本文为开发中遇到的问题解决方案总结：ios移动端软键盘收起后input输入框焦点错位或无法输入解决 问题描述： 页面背后是可滚动的列表，前面是弹出框，里面有需要输入值的input框。当打开键盘后，弹出框跟后面的列表都会被顶上去一段距离，当再关闭键盘就可能出现：前面的弹出框回到了原来的位置，而后面的列表依然是顶上去的位置。这时后再去点击弹出框的输入框或者按钮的时候发现焦点依然停留在键盘弹出后顶上去的...
微信小程序当在一个页面有多个input输入框，自动弹键盘，需要点击input框2次才能聚焦的问题
weima9977的博客
10-21 5250
微信小程序input点击2次才能聚焦的问题
【bug解决】ios输入框不能自动聚焦以及聚焦后被键盘遮挡问题的解决办法
坚信万物皆可切的切图仔
03-04 1893
前言 在做一些评论或者其他类似功能的时候，常常遇到以下两个问题： 可能我们要在点击评论图标时，自动聚焦底部的输入框，但是我们发现调用输入框的focus事件不起作用。 输入框聚焦后被弹起的键盘遮挡，要往下滑动才能看到输入框 解决 setTimeout(() => { //解决第一个问题，myInput是获取到的输入框元素 myInput.value.focus() //解决第二个问题 document.body.scrollTop = do
如何保持iOS上键盘出现时输入框不被覆盖
ios开发 知识点 靳会有
12-16 658
在 iOS5 上请求显示键盘时，系统从屏幕底部将键盘滑入上来，位于应用的内容之上。  如果屏幕中的内容项目比较多，它就可能覆盖住文本输入框之类的对象。你必须调整你的内容，使得输入框保持可见。 你会想到哪些处理方法呢？ 第一种， 临时调整窗口中各个视图的大小，使得键盘从下向上占领的区域空白。键盘的高度（ keyboard.size.height ）是一定的，将视图中所有内容所在区域的 y 值
ios移动端input输入框常见问题解决办法
Moon Star
03-29 6848
1、ios端兼容input光标高度 问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上 当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。 出现原因分析：通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动和父盒子的...
vue移动端项目 ios input框点击无效，需要点击多次
qq_39750019的博客
07-22 847
最近开发，发现vue移动端项目input在ios上点击失效，需要多次点击才可以获取焦点 排查发现导致这个问题是因为项目中引入了FastClick， 这个是解决移动端延迟300毫秒的优化 当使用FastClick 时，输入框在ios上点击输入调取手机自带输入键盘不灵敏，有时候甚至点不出来。而安卓上完全没问题。这个原因是因为FastClick的点击穿透 在全局main.js FastClick.prototype.focus = function(targetElement) { var len.
微信小程序开发ios手机键盘弹起input输入框会遮挡上面内容
最新发布
09-06
在微信小程序开发中，如果在iOS手机上遇到了键盘弹起时会遮挡上面内容的问题，可以通过以下方法解决。 首先，我们需要获取键盘的高度。在小程序中，可以使用wx.getSystemInfoSync()方法来获取系统信息，其中包括键盘的高度。 接下来，我们需要监听键盘的弹起和隐藏事件。可以通过监听页面的focus和blur事件来实现。当input框被选中时（focus事件），我们可以将页面整体上移一个键盘高度的距离，以保证输入框不被键盘遮挡。当input框失去焦点时（blur事件），我们将页面恢复到原始位置。 具体实现时，可以在页面的onLoad生命周期函数中调用wx.getSystemInfoSync()方法获取系统信息，并存储键盘的高度。然后在页面的focus和blur事件中分别设置页面的上下边距，以达到上移和恢复的效果。 示例代码如下： ``` // 在页面的onLoad生命周期函数中获取系统信息 onLoad: function() { var that = this; wx.getSystemInfoSync({ success: function(res) { that.setData({ keyboardHeight: res.windowHeight * 0.75 // 假设键盘高度占屏幕高度的3/4 }); } }); }, // input框获取焦点时的事件处理函数 onFocus: function() { this.setData({ marginTop: -this.data.keyboardHeight }); }, // input框失去焦点时的事件处理函数 onBlur: function() { this.setData({ marginTop: 0 }); } ``` 需要注意的是，根据不同手机型号和键盘设置的不同，键盘的高度可能会有所差异，因此上述代码中获取到的键盘高度是一个近似值，可以根据实际情况进行调整。 以上是解决微信小程序开发中iOS手机键盘弹起时会遮挡上面内容的一种方法，希望能对你有所帮助。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值