iOS设备input不能自动focus聚焦的解决方法

于 2024-05-06 16:46:18 发布
阅读量565 收藏
点赞数 4
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38483133/article/details/138499925
版权

我是在小程序里面遇到的，安卓系统好好地，就ios毛病最多，shit。。。。,聚焦失败，拉不起键盘。
解决方案：总结一句话----需要固定input框的位置就不会出现这种问题

我出现在这个问题的原因是：刚开始需要隐藏input框，上面有一段文字需要逐个显示出来，这导致文字显示的时候空间不断撑高，input框位置向下移动，所以ios就出现聚焦失败，拉不起键盘的问题。

解决方案：将input框所在的位置固定，不要让乱移动。该显示的时候显示。

参考资料：https://cloud.tencent.cn/developer/article/1545937

五颜六色的黑
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
解决iOS下无法触发focus事件的问题
08-27
今天小编就为大家分享一篇解决iOS下无法触发focus事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于iOS 11不能定位问题的解决方法
08-28
最近在开发中遇到一个问题，后来发现是苹果新增一个权限，自己可查，下面这篇文章主要给大家介绍了关于iOS 11不能定位问题的解决方法，文中介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起来一起学习学习吧。
focus()在IOS上失效的解决方法
Jana Jing的分享
11-12 2298
<input id='myInput'></input> <div @click='replyComment'>点击</div> replyComment() { var iosInput = document.getElementById('myInput'); iosInput.focus(); }, 不能将iosInput.focus()封装在函数中再由事件触发，这样也会失效 ...
ios h5 input focus() 光标不能聚焦到input上
phpxxo的博客
08-02 2501
ios为了安全起见, 调用focus方法获取焦点, 必须由真实的用户交互(真实点击)的触发源才生效 例如, 直接用$('#input1').focus() , 或者 $('#btn').trigger('click') 触发的, 是不能使 foucs生效 但是如果 $('#btn') 如果是真实用户点击, 然后触发了 input的click事件, 再调起foucs, 这样是生效的 ios点击事件有延迟, 这里引入FastClick.js 解决 示例代码: <!DOCTYPE html&gt.
ios上input的focus()、autofocus无效处理
fly_wugui的博客
04-28 7225
出现focus无效原因： ios的UIWebView 默认的KeyboardDisplayRequiresUserAction为false，设置为true就行，WKWebView 不支持这个属性，如果要从原生入手解决，请参考https://stackoverflow.com/questions/32407185/wkwebview-cant-open-keyboard-for-input-fie...
在uni-app 小程序 input IOS无法自动聚焦bug
web全栈开发的博客
09-30 1896
input 或者textarea在android端设置focus自动聚焦正常，但是在IOS上面就聚焦失败 有大佬说因为IOS需要主动点击才能聚焦，后来观察到，其实键盘已经弹出了，因为能获取到键盘的高度，所以不是没有聚焦到，只是先后顺序问题。 所以尝试设置延时操作问题解决如下： setTimeout(() => { this.inputFocus = true; }, 100) 这里延时不需要太长，自己把控。 ** 开发了发前端面试题小程序非常实用 喜欢的可以扫码收藏 ** ...
uniapp input输入框 在IOS手机无法自动获取焦点
weixin_45376154的博客
11-29 847
uniapp input输入框 在IOS手机无法自动获取焦点
Chrome浏览器中input:focus不生效的原因
最新发布
qq_35134503的博客
03-24 355
谷歌浏览器在input上增加了 :focus-visible 属性。css 中给input 增加outline:none;
解决IOS不能自动获取焦点问题
Florenza的博客
12-17 3975
ios 会限制autofocus出于安全的考虑移动端的Safari默认是不支持 autofocus 属性的，并且只有用户主动触发的事件才可以使focus一类 在看过了N多个文档后,看到这个主动触发 了解了只有当人操作的时候才会去聚焦,那么我们自动聚焦需求一般都是进入页面就需要聚焦,所以想到了在 app.vue 的页面中创建了一个 input,然后在跳转之前手动的去聚焦这个input 框也就相当于调起了键盘 app.vue //App.vue <script> mounted..
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
10-31
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案 兼容ios8 ios9 ios 10
解决vue js IOS H5focus无法自动弹出键盘的问题
10-18
今天小编就为大家分享一篇解决vue js IOS H5focus无法自动弹出键盘的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
iOS系统和微信中不支持audio自动播放问题的解决方法
08-29
在本文中，我们将探讨如何解决这一问题，以便在iOS设备上的微信环境下实现H5页面的音频自动播放。 首先，我们需要了解iOS系统对音频播放的策略。苹果设备为了节约电量和防止用户被打扰，要求音频播放必须由用户交互...
iOS11.3以下modal中input光标错位的解决方法
08-26
iOS11.3以下modal中input光标错位的解决方法是指在iOS11.3以下的系统中，出现了input光标错位的问题，即在弹出层中输入框的光标位置不正确的问题。这个问题是由于iOS系统的BUG所导致的，幸运的是，在iOS11.3以后，这...
微信小程序在ios下Echarts图表不能滑动的问题解决
10-16
主要介绍了微信小程序在ios下Echarts图表不能滑动的解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,下面我们来一起学习下吧
h5开发， ios的input框focus无效
qq_42341025的博客
07-04 1900
最近遇到，在ios上的h5页面，点击获取验证码按钮， 自动聚焦 验证码的input， 使用 this.$refs.名称.focus()， 发现在安卓有效， ios无效 通过检查得知： focus() 如果在promise或者定时里面调用，在ios上是无效的， 记录一下 ...
ios输入框聚焦问题
m0_37728716的博客
01-06 2239
众所周知，ios下的网页有个特性——不允许JS自动获取input输入框的焦点并调出虚拟键盘，归根结底是聚焦事件的触发源头必须是用户，所以我们不管怎么模拟click再focus都是无效的。 这儿记录一下为什么用户点击了页面的按钮，input.focus()仍然无效，demo如下 <template> <div id="app"> <input type...
在微信小程序使用fixed布局固定input 输入框，iPhone ios系统无法获取焦点问题解决。
HHH917的博客
11-03 1958
查看微信小程序开发文档 对input的介绍 https://developers.weixin.qq.com/miniprogram/dev/component/input.html。强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)微信小程序 是fixed布局后 ios版本 input 输入框 无法选中 但是长按可以获取焦点。添加 always-embed 属性 即可解决问题。发现了 always-embed 属性。
ios google input focus样式不生效
05-20
如果你在iOS上使用Google输入法时，输入框的焦点样式不生效，可能是因为该输入法有自己的默认样式，覆盖了浏览器的样式。你可以尝试在CSS中使用!important来强制覆盖Google输入法的样式，例如： ```css input:focus { border: 1px solid #ccc !important; } ``` 如果这种方法不起作用，你可以尝试在JavaScript中解决。当输入框获取焦点时，手动修改其样式属性，例如： ```javascript document.querySelector('input').addEventListener('focus', function() { this.style.border = '1px solid #ccc'; }); ``` 希望这些方法能够帮助你解决问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值