解决移动端ios机型输入框无法自动聚焦问题

于 2023-04-17 10:32:14 发布
阅读量558 收藏 1
点赞数 1
文章标签： 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60800971/article/details/130194664
版权

给input添加样式

user-select: auto;

-webkit-user-select: auto;

即可。

阿冰232
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
H5移动端input元素在IOS下的setTimeout内无法获取焦点
lifachang的博客
11-13 798
H5移动端input元素在IOS下的setTimeout内无法获取焦点移动端在setTimeout里设置input获取焦点在ios下是无效的，这里是个坑！ 移动端在setTimeout里设置input获取焦点在ios下是无效的，这里是个坑！ 下面是js代码和效果截图，有兴趣的可以扫码亲测一下，若有填上了这个坑的，请多指教！ $('button').on('click', function () {...
iOS项目开发键盘弹出遮挡输入框问题解决方案
01-05
在iOS或Android等移动端开发过程中，经常遇到很多需要我们输入信息的情况，例如登录时要输入账号密码、查询时要输入查询信息、注册或申请时需要填写一些信息等都是通过我们键盘来进行输入的，在iOS开发过程中，一般用于进行输入信息的有两类：UITextField和UITextView，前者是单行输入文本框，后者是可滑动的多行输入文本框，在这整个开发过程中，我们需要控制键盘的弹出和收起、在输入结束的时候获取输入的信息，此外，我们还需要保证在键盘弹起的时候不遮挡我们输入的文本框。今天，我们就主要来说一下文本框输入的完整响应过程以及最后这个遮挡问题的解决方案。 一 文本框输入完整的响应过程 首先，我们
iOS umeng 获取deviceToken的方法
08-28
下面小编就为大家分享一篇iOS umeng 获取deviceToken的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决移动端 ios 系统键盘遮挡的问题
08-28
下面小编就为大家分享一篇解决移动端 ios 系统键盘遮挡的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
IOS 键盘挡住输入框的问题解决办法
01-05
IOS 键盘挡住输入框的问题解决办法 在iOS开发发现一个问题，有时输入框位于低出时，当编辑输入时，弹出的键盘会挡住输入框，令用户看不清楚实时的输入情况,使界面交互极度不友好。 经过查资料终于解决了这个问题。 解决思路： 1. 输入框监听UIControlEventEditingDidBegin事件，当用户开始输入时，将整个view上移。 2. 输入框监听UIControlEventEditingDidEnd事件，当用户结束输入时，将整个view下移，恢复到原位置。 输入框监听事件： [textfield addTarget:self action:@selector(textFie
React+Taro h5 解决ios机型input无法自动聚焦的问题
爱拼才会赢～的博客
03-10 2781
#####1、原因 在ios12系统以上版本，苹果端考虑到用户的安全性和体验方面的因素，所以不支持input框的自动聚焦 #####2、方案 需要用户主动触发事件才可以使 focus生效 #####3、需求 首页顶部有个搜索框，点击进去搜索页，自动聚焦并弹起键盘 #####4、思路 首先封装一个搜索功能的组件，其次在全局app.js中引入，因为是在全局引入的，所以每个页面的顶部都会出现搜索框，这样就可以解决ios机型无法聚焦的问题。 然后我们通过EventEmitter来进行页面通信，来根据实际需求判断不
uniapp uview u-input ios手机点击不聚焦
lovewangyage的博客
11-14 886
u-input ios手机点击不聚焦
ios输入框聚焦问题
m0_37728716的博客
01-06 2192
众所周知，ios下的网页有个特性——不允许JS自动获取input输入框的焦点并调出虚拟键盘，归根结底是聚焦事件的触发源头必须是用户，所以我们不管怎么模拟click再focus都是无效的。 这儿记录一下为什么用户点击了页面的按钮，input.focus()仍然无效，demo如下 <template> <div id="app"> <input type...
html input 自动聚焦,iOS设备input不能自动focus聚焦的解决方法
weixin_39546747的博客
05-30 3233
移动端(iPhone、iPad)的 Safari 或者微信默认是不支持 autofocus 属性的，并且只有用户主动触发的事件才可以使 focus 一类的方法生效。并且在 iOS 中使用position: fixed 会导致 input 输入框的位置出现问题，导致 input 无法点击或者说无法聚焦。找了几个解决方案，归纳整理一下：1、stackoverflow作者，尝试过模拟点击，触发点击，直...
解决IOS不能自动获取焦点问题
Florenza的博客
12-17 3814
ios 会限制autofocus出于安全的考虑移动端的Safari默认是不支持 autofocus 属性的，并且只有用户主动触发的事件才可以使focus一类 在看过了N多个文档后,看到这个主动触发 了解了只有当人操作的时候才会去聚焦,那么我们自动聚焦需求一般都是进入页面就需要聚焦,所以想到了在 app.vue 的页面中创建了一个 input,然后在跳转之前手动的去聚焦这个input 框也就相当于调起了键盘 app.vue //App.vue <script> mounted..
解决ios h5 input输入框被输入法弹出一块区域的问题
08-27
今天小编就为大家分享一篇解决ios h5 input输入框被输入法弹出一块区域的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决ios部分手机键盘弹起导致input无法聚焦的bug
THINK_OF_的博客
12-10 7182
环境：微信浏览器 场景：我们的登录页面，两个输入框，点击获取验证码，弹出一个弹层，弹层采用fixed布局，弹层元素是输入框来输入验证码的 问题：点击弹层input获取焦点后，键盘自动弹起，把页面顶起来了，当点击弹层中处input外区域，键盘自动收起，弹层输入框恢复原位，但是无法聚焦，形成一个bug 测试：测试过程中发现键盘收起后的输入框无法聚焦，但是在之前被键盘顶起来的位置点击居然有效，键盘...
ios input输入框失去焦点 按钮响应区域错位
User_Lily的博客
06-21 1892
转载自 weixin_42573146：H5微信页面开发 IOS系统 input输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置，导致弹框里的按钮响应区域错位 软键盘弹起后，若原输入框被遮挡，页面整体将会上移，然而当输入框失焦，软键盘收起后，页面未恢复，导致弹框里的按钮响应区域错位。 解决方案：给输入框（或select选择框）添加失去焦点的事件，当输入框失去焦点，页面自动滚动到顶...
关于H5移动端 ios端 input输入框失去焦点，页面视觉回弹，但是底部留白问题
ClassMake的博客
08-14 1563
在移动端，当点击输入框时，弹出软键盘，页面被顶上去一截，当输入完毕失去焦点，软键盘关闭时ios上页面高度没恢复，安卓手机会自动恢复页面高度。 解决方法： 在输入框失去焦点后（关闭键盘）让页面滚一下 非框架搭建的页面 const windowHeight = window.innerHeight input.addEventListener(‘blur’, function () { let wi...
IOS input输入时弹出键盘挤压页面，使页面失去焦点解决方法
一只会喊666的咸鱼的博客
05-06 2185
前端在做手机适配时，通常IOS的适配很麻烦，我之前就遇到一个问题； 在安卓手机上点击input是，手机弹出键盘，页面不会与任何变化； 当苹果手机点击input是弹出的键盘，会将页面往上挤压一段距离，输入完成后，关闭键盘，你会发现页面会出现纵向拉条，之所以出现这个，就是因为键盘弹出使页面受到了一定程度的挤压，所以我们应该 在input失去焦点时将纵向拉条距离顶部的距离归零，但还有一个问题，就是有...
IOS中select、input失焦后，页面上移，点击不了解决办法
Angel_girl319的博客
11-22 492
$(function () { var u = navigator.userAgent; var flag; var myFunction; var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isIOS) { document...
移动端ios输入框自动聚焦问题
栗子的成长ing
12-25 5088
之前有遇到关于input聚焦的问题，但是一直没总结。今天有时间就整理总结以下。 一. autofocus 在pc/安卓手机上都有效，但是在ios的safari浏览器上不起作用。 因此对于ios手机上input自动聚焦问题，需要特殊处理下。 二.ios手机上，input的focus事件需要通过用户交互才能触发。 当按钮和input框在同一个页面时，可以通过切换display状态,来显示...
h5页面在ios端输入框不能自动聚焦
sinat_39049092的博客
04-17 5364
我们在写h5页面嵌套在原生app里面的时候，有时候会遇到进入某个页面就让input输入框自动聚焦的需求（比如搜索页面）。但是通常在iso手机上会出现自动聚焦没反应的情况。 然后我在网上试验过各种解决方案，基本都是无效的。最终和ios开发人员联调得出结果，在ios12系统以上版本，苹果端考虑到用户的安全性和体验方面的因素，是不支持input框自动聚焦属性的！ 然后，最终的解决方案是： 1. 在inp...
移动端iOS系统onload事件失效的问题
最新发布
06-07
移动端iOS系统onload事件失效的问题可能是由于移动端浏览器的机制不同于桌面端浏览器，导致onload事件无法触发。此外，iOS系统的Safari浏览器还存在一些特殊的问题，如页面缓存、用户手势等问题，也可能导致onload事件失效。 解决这个问题的方法有多种，以下是一些常见的解决方法： 1. 使用window.onload事件代替onload事件 在移动端iOS系统中，window.onload事件可以替代onload事件，可以使用以下代码： ``` window.onload = function() { // Your code here }; ``` 2. 使用DOMContentLoaded事件 DOMContentLoaded事件会在DOM树结构构建完成后触发，不受页面资源加载的影响。可以使用以下代码： ``` document.addEventListener('DOMContentLoaded', function() { // Your code here }, false); ``` 3. 使用$(document).ready()事件 如果您使用jQuery库，可以使用$(document).ready()事件来代替onload事件。可以使用以下代码： ``` $(document).ready(function() { // Your code here }); ``` 4. 禁用页面缓存 iOS系统的Safari浏览器会将页面缓存下来，如果您的页面有缓存，onload事件可能不会触发。可以在HTML头部添加以下标签来禁用页面缓存： ``` <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="0"> ``` 5. 禁用用户手势 在iOS系统的Safari浏览器中，用户手势会触发页面刷新，导致onload事件失效。可以使用以下代码禁用用户手势： ``` document.addEventListener('touchmove', function(event) { event.preventDefault(); }, false); ``` 希望这些方法可以帮助您解决移动端iOS系统onload事件失效的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值