ios系统上input输入框无法输入值的解决办法

最新推荐文章于 2025-04-16 23:01:07 发布
最新推荐文章于 2025-04-16 23:01:07 发布
阅读量1.1w 收藏 4
点赞数 1
分类专栏： iOS与css样式 文章标签： iOS系统 输入框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43642423/article/details/83863847
版权

有好多做手机端网页开发的朋友常常遇到这种问题,就是苹果系统不能在输入框输入值在这里插入图片描述只要在input 上面加上css样式-webkit-user-select:text !important 或者在父类加上这个样式就可以了

解决 input 输入框在 iOS 系统中无法输入内容
m0_67401153的博客
05-16 1227
问题 input 输入框在 Android 系统可以输入和点击，但是在 iOS 系统上 input 输入框无法点击和输入。 解决 去掉下列样式 -webkit-touch-callout:none; -webkit-user-select:none; 或者这样写 *:not(input, textarea) { -webkit-touch-callout: none; -webkit-user-select: none; } 拓展 关于 user-select 属性 定义和用法 user-sel
解决 - 解决ios input 和textarea不能输入的问题
sunshime的博客
07-19 2730
  写移动端项目总有一些兼容性需要我们解决滴，就比如我现在遇到的问题：ios 无法正常在input和textarea上面输入我们需要的内容，而安卓手机是可以正常输入的，一点问题都没有。那么我现在就给大家分享一下如何解决 ios 上面的问题啦。      解决方法：直接在标签中加入style="-webkit-user-select:text !important" contenteditable="true" 这些代码即可。这里举个栗子： <textarea id="test" styl
ios下input不能输入，没有光标的原因及解决办法
ys_healone的博客
09-13 1741
iphone7P输入框选择后无法输入，也没有光标闪烁，说实话觉得这个问题有点莫名其妙了，因为本身我的iphone14没有这个问题也没碰到过这种bug。开发中有时会设置-webkit-user-select: none;，用来阻止用户的选择内容行为，这会导致input无法选择，无法输入。
IOS默认浏览器input框不出现输入框
weixin_40499854的博客
07-07 271
IOS默认浏览器input框不出现输入框 在使用IOS设备浏览网页时，有时会遇到一个问题，即在默认浏览器上点击input框时，键盘弹起但是输入框却无法正常输入文字。这个问题一直困扰着很多IOS用户，让他们无法正常地在网页上输入文字。本文将介绍这个问题的原因，并提供一些解决方案。 问题原因 这个问题的根本原因在于IOS默认浏...
typescript html input无法输入解决办法
最新发布
njsgcs的博客
04-16 265
【代码】typescript html input无法输入解决办法。
ios手机中input框失去焦点之后不能再次输入
WHY_222的博客
12-10 811
问题描述 一个弹出层中有input输入框，第一次输入内容后ios键盘收起，再次点击input框输入内容时获取不到焦点 原因 在弹出层点击input时调起键盘，页面会被顶上去document.body.scrollOffset大于0，收起键盘时scrollOffset不变，造成焦点错位。 安卓手机点击时调起键盘不会把页面顶上去，会改变窗口高度变化，收起时不会造成影响。 解决办法 $('input,s...
关于ios下输入框无法输入的问题
u010007013的博客
05-20 3229
今天在项目中遇到在苹果手机中无法输入的问题。 我的安卓手机和在谷歌手机模拟器上都没出现这个问题，但是有同事告诉我他的苹果手机无法输入。我自己试了下他的手机果然点击输入框没有任何反应。 我觉得可能是css的问题，于是在项目的全局css里寻找关于input框的css。 结果我发现了这样一行代码： *{ -webkit-user-select:none; } 好吧，这行代码是前人留下的代码。字面...
解决 苹果ios input输入框弹出输入法 但是 无法输入内容问题
HHH917的博客
07-20 2269
代码】解决苹果iosinput输入框弹出输入法但是无法输入内容问题。
解决ios手机中input输入框光标过长的问题
08-27
"解决ios手机中input输入框光标过长的问题" 在移动端页面开发中，input输入框的光标大小问题是一个常见的问题，特别是在iOS手机中，光标大小与安卓手机不一致的问题。今天，我们将讨论如何解决ios手机中input输入框...
解决ios h5 input输入框被输入法弹出一块区域的问题
01-05
解决方案 scrollIntoView scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true，或者省略它，窗口会尽可能滚动到自身顶部与元素顶部平齐 /** ...
IOS系统中微信、浏览器、手机端输入框input无法输入
ice_cream__的博客
07-05 1351
，阻止了用户的选择内容行为，会导致一些“内容可编辑”标签无法正常使用，比如input、textarea。该属性是用来禁止用户进行复制选择的，这是webkit内核浏览器下的一个bug，具体可以参考这篇文章：(APP内嵌H5、浏览器，在弹窗中的input框无法输入，最多只能输入一个字，并且无光标。是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。属性的元素（不论这个属性的值是什么）。按照给定的属性，选择所有匹配的元素。会同时匹配 <span>
html输入框提示字位置,怎么解决苹果手机网页input输入框输入时，input框设置位置固定但是还是显示有问题...
weixin_35709751的博客
06-04 735
问题1：项目时，做了个搜索框，想实现的功能是输入信息的部分文字就能跳到该信息的位置，设置input框始终置顶，position：fixed，在苹果手机的浏览器上，只要一输入文字就会跳到该位置没错，但是input框因为输入法的出现没看到，会出现图二这种情况。(图一：输入法关闭之后才会显示出该input搜索框)(图二：注意光标的位置。原本应该是在input框进行输入的，但是输入法一弹出变成只能在光标的...
ios端 input输入框遮挡问题解决
weixin_30550081的博客
04-18 389
ios端输入框遮挡问题很烦人 记录自己的解决办法 问题: 整体页面布局全都是flex 但是在ios中使用原生输入法显示正常 使用第三方输入法就会出现遮挡 解决:获取焦点添加 父元素transform: translateY(0%); 原理:我不知道developer.mozilla.org我这里一直打不开 有空再补上好了 <div class='detail'&gt...
IOS开发遇到的小小坑-input无法输入值的问题
qq_43625014的博客
09-10 321
看了一些伙伴的经验，在input的父类加上css样式： -webkit-user-select:text !important; 但是对于我没有用，输入了1个字符就无法继续输入 为此，解决方案： 修改一处，就可以解决无法在input框里输入值的问题， 在css里面，会有一段这样的代码： *{ -webkit-tap-highlight-color: rgba(0,0,0,0); ...
微信公众号之IOS12以上版本自动填充验证码的输入框无法获取填充值
lwfcomeon的博客
02-21 1506
用的vue+vant 写的登录页 就两项 手机号 验证码，但是IOS自动填充成功完验证码之后，验证码框一旦失去焦点，值就不见了。也不能通过v-model拿到值。至今不知道因为什么，有大佬知道可以告诉我一下，但我解决了。 我看网友们都是自动填充两遍怎么办，没人问填充完了失去焦点值没了怎么办…… 1 把van-field换成原生input标签（样式改改就好了嘛） 2 因为换成input之后不能用v-model直接拿输入框值了，在下不才，用了jquery，当然 你也可以onchange监听值。反正拿到就行了。嘻嘻
ios移动端input输入框常见问题解决办法
Moon Star
03-29 7473
1、ios端兼容input光标高度 问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上 当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。 出现原因分析：通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动和父盒子的...
ios上input无法输入值的解决办法
热门推荐
zhanglijiang_2017的博客
07-17 2万+
鉴于自己遇到的坑，被气到了，写一篇文章给大家参考。 页面上的input输入框设置-webkit-user-select:text !important;并且给input的父类加上此样式，最开始百度找的答案是说body里设置了 -webkit-user-select: none;我把这个改掉，还是不行。最终解决方案是在input的父类加上-webkit-user-select:text !...
关于移动端input框 在手机页面中无法输入文字的问题
joey_ch的博客
05-15 2万+
今天解决了一个小小的bug，写响应式页面的时候，发现页面在手机端打开的时候input框无法聚焦光标，无法输入文字，绞尽脑汁 找了半天 才发现自己多加了一段代码(这个代码是模版中自带的 也是醉醉哒)-moz-user-select: none; -webkit-user-select: none;把这行代码注视掉就可以了 至于这行代码作用是什么 解释如下或许你常常不希望用户在你的网站上选择
uniapp手机键盘输入英文input输入框获取不到值
03-15
### 已知问题分析 在 UniApp 中开发时，可能会遇到输入框（`<input>` 或 `<textarea>`）在手机键盘弹出后无法正常获取值的情况。这种现象可能与以下几个因素有关： 1. **iOS 和 Android 的兼容性差异**：不同平台对软键盘的行为处理方式存在差异[^2]。 2. **输入框的绑定机制**：如果使用了某些框架组件（如 `u-view`），可能存在事件冲突或数据同步延迟的问题[^3]。 3. **键盘高度计算错误**：部分情况下，键盘的高度未正确传递给页面逻辑层，可能导致输入框位置异常或失去焦点[^4]。 --- ### 解决方案 #### 方法一：优化输入框绑定方式 通过原生的 `@input` 事件替代双向绑定 (`v-model`) 来捕获用户的输入内容。这种方式能够有效减少因框架封装而导致的数据更新滞后问题。 ```vue <input type="text" class="flex-1 ml-2" placeholder="请输入内容" autocomplete="off" always-embed="true" adjust-position="true" cursor-spacing="30" @input="handleInput" /> ``` 其中，`handleInput` 函数用于实时监听用户输入的内容： ```javascript methods: { handleInput(event) { const inputValue = event.detail.value; console.log('当前输入值:', inputValue); this.inputValue = inputValue; // 将值赋给 Vue 数据模型 } } ``` --- #### 方法二：调整页面布局防止输入框被遮挡 为了确保输入框不会因为键盘弹出而被遮挡，可以通过监听 `@focus` 和 `@blur` 事件动态调整输入框的位置。 以下是具体实现代码： ```html <template> <view class="container"> <!-- 页面头部 --> <view class="header">聊天室</view> <!-- 聊天消息区域 --> <scroll-view scroll-y class="message-area"></scroll-view> <!-- 输入框 --> <view :style="{ bottom: keyboardHeight + 'px' }" class="input-container"> <input type="text" placeholder="发送消息..." @focus="onFocus" @blur="onBlur" /> </view> </view> </template> <script> export default { data() { return { keyboardHeight: 0, // 键盘高度 }; }, methods: { onFocus(e) { const { height } = e.detail; // 获取键盘高度 this.keyboardHeight = height || 0; }, onBlur() { this.keyboardHeight = 0; // 键盘收起时重置高度 } } }; </script> <style scoped> .container { display: flex; flex-direction: column; height: 100vh; } .header { height: 80px; background-color: #f5f5f5; } .message-area { flex-grow: 1; overflow-y: auto; } .input-container { position: fixed; width: 100%; padding: 10px; box-sizing: border-box; transition: all 0.3s ease-in-out; } </style> ``` 上述代码的关键在于利用 `e.detail.height` 动态获取键盘高度，并将其应用到输入框容器的样式中，从而避免输入框被遮挡。 --- #### 方法三：强制嵌入模式 (always-embed=true) 对于 iOS 设备，在某些场景下默认行为会导致输入框无法正确响应键盘事件。此时可以在输入框上添加 `always-embed="true"` 属性，强制将输入框嵌入到 WebView 中运行。 示例代码如下： ```html <input type="text" always-embed="true" adjust-position="true" cursor-spacing="30" @input="handleInput" /> ``` 此属性的作用是让输入框始终处于嵌入状态，而不是依赖于系统的全局键盘管理器。 --- ### 总结 综合以上三种方法，推荐优先尝试以下步骤来解决问题： 1. 使用 `@input` 替代 `v-model` 绑定，确保输入值能及时被捕获； 2. 添加 `always-embed="true"` 和 `adjust-position="true"` 属性以增强跨平台兼容性； 3. 如果仍存在问题，则可通过动态监听 `@focus` 和 `@blur` 事件调整输入框位置。 --- ###
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值