ios下input不能输入，没有光标的原因及解决办法

于 2023-09-13 08:46:18 发布
阅读量1.2k 收藏
点赞数 2
分类专栏： 错误 css3 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ys_healone/article/details/132844622
版权
错误 同时被 2 个专栏收录
15 篇文章 1 订阅
订阅专栏
css3
3 篇文章 0 订阅
订阅专栏
作者在修复bug时遇到iPhone7P的输入框无法输入问题，发现是由于开发者设置`-webkit-user-select:none`阻止了用户选择内容。解决方法是将该样式属性改为`user-select:auto`。
摘要由CSDN通过智能技术生成
今天在修改bug的时候，测试提出一个问题：

iphone7P输入框选择后无法输入，也没有光标闪烁，说实话觉得这个问题有点莫名其妙了，因为本身我的iphone14没有这个问题也没碰到过这种bug

在网上查找资料发现了原因：

开发中有时会设置-webkit-user-select: none;，用来阻止用户的选择内容行为，这会导致input无法选择，无法输入

解决办法：将将其删除或者设置为auto
input, textarea {
    -webkit-user-select: auto!important;
    -khtml-user-select: auto!important;
    -moz-user-select: auto!important;
    -ms-user-select: auto!important;
    -o-user-select: auto!important;
    user-select: auto!important;
}

ys_healone
关注
专栏目录
ios下input的光标问题
小毛驴的博客
05-21 2122
1.h5的input在ios下会有光标变大的问题 2.h5的input有padding-top时会出现光标前移
解决 input 输入框在 iOS 系统中无法输入内容
明天也要努力的博客
05-07 5062
问题： input 输入框在 Android 系统可以输入和点击，但是在 iOS 系统上 input 输入框无法点击和输入。
苹果手机ios的input不能输入，不能点
weixin_30244889的博客
06-04 818
在做手机端开发时。遇到问题：input输入框安卓手机可以输入和点击，但是到苹果手机上input输入框就不能点了也不能输入了，原因就是下面这几行css代码的影响，删掉就行了。 -moz-user-select: none; //css 让文字不被选中 -webkit-user-select: none; //禁止移动端用户用鼠标在页面上选中文字 user-selec...
Vue项目中使用input在IOS中没有光标
小生鲜
05-31 3460
最近在做一个vue项目，使用到了input搜索框，之前一直没注意到此问题，在android中使用一切正常，最近在测试ios中获取焦点没有光标，而且输入有间断，输入一个词之后必须重新点击input一次才能输入，找了好久才想起在全局引入中有user-select：none样式，之前为了防止点击图片链接会选中图片，但是他会影响input，textarea输入框，慎用！注释掉问题解决。 ...
关于ios下输入框无法输入的问题
u010007013的博客
05-20 3077
今天在项目中遇到在苹果手机中无法输入的问题。 我的安卓手机和在谷歌手机模拟器上都没出现这个问题，但是有同事告诉我他的苹果手机无法输入。我自己试了下他的手机果然点击输入框没有任何反应。 我觉得可能是css的问题，于是在项目的全局css里寻找关于input框的css。 结果我发现了这样一行代码： *{ -webkit-user-select:none; } 好吧，这行代码是前人留下的代码。字面...
移动端ios出现输入框无法输入的情况
weixin_42845571的博客
11-16 2055
加上这段css即可 [contenteditable="true"], input, textarea { -webkit-user-select:auto!important; -khtml-user-select: auto!important; -moz-user-select: auto!important; -ms-user-select: auto!important; -o-user-select: auto!important; user-select: auto!i
ios系统上input输入框无法输入值的解决办法
u011286552的博客
12-30 1414
本文转自：https://blog.csdn.net/weixin_43642423/article/details/83863847 有好多做手机端网页开发的朋友常常遇到这种问题,就是苹果系统不能在输入框输入值 只要在input 上面加上css样式-webkit-user-select:text !important 或者在父类加上这个样式就可以了 ...
iOS11.3以下modal中input光标错位的解决方法
08-26
iOS11.3以下modal中input光标错位的解决方法是指在iOS11.3以下的系统中，出现了input光标错位的问题，即在弹出层中输入框的光标位置不正确的问题。这个问题是由于iOS系统的BUG所导致的，幸运的是，在iOS11.3以后，这...
解决ios手机中input输入框光标过长的问题
08-27
通过修改line-height的值，我们可以看到iOS和Android手机input光标大小不一致的问题得到了解决。下面是修改前后的效果比较： | 手机类型 | 修改前 | 修改后 | | --- | --- | --- | | iOS | 光标大小过大 | 光标大小...
解决ios h5 input输入框被输入法弹出一块区域的问题
01-05
解决方案 scrollIntoView scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true，或者省略它，窗口会尽可能滚动到自身顶部与元素顶部平齐 /** ...
关于ios输入框无法输入的坑
weixin_40623562的博客
04-20 600
input, textarea { -webkit-user-select: auto; background-color: transparent; border: none; outline: none; } 添加 -webkit-user-select: auto;
ios上input无法输入值的解决办法
热门推荐
zhanglijiang_2017的博客
07-17 2万+
鉴于自己遇到的坑，被气到了，写一篇文章给大家参考。 页面上的input输入框设置-webkit-user-select:text !important;并且给input的父类加上此样式，最开始百度找的答案是说body里设置了 -webkit-user-select: none;我把这个改掉，还是不行。最终解决方案是在input的父类加上-webkit-user-select:text !...
h5 ios手机 隐藏input输入光标
huch的博客
05-24 5792
前面在做一个H5中用到的6位数字密码弹框（类似支付、微信那种）时，遇到一个可怕问题，那就是在浏览器和安卓中是不显示输入光标的，但是在ios手机上光标总是能看见，像穿透一样地显示最外层。 先说下实现密码框的思路，一般是采用遮挡隐藏一个输入框，然后在输入框的上面该一层一般是一组6个<span>●</span>，然后通过点击布
点击input框不出现光标
weixin_40758850的博客
06-10 6982
从视觉效果上就是让input看起来不像input，只需2步： readonly unselectable=“on” eg: <input class="imitationSelect" type="text" value="中小城市" readonly unselectable="on"> ...
input输入框在苹果手机失效
wgb0409的博客
12-24 935
input { -webkit-user-select: text !important; } textarea { -webkit-user-select: text !important; }
关于微信手机端IOS系统中input输入框无法输入的问题
weixin_30855099的博客
08-02 164
把-webkit-user-select:none改成-webkit-user-select:auto;覆盖掉或者直接注释掉就行！ 别人家的博文：http://blog.csdn.net/rosemarrytop/article/details/53265568 转载于:https://www.cnblogs.com/songmengyao/p/7274884.html...
css设置input不显示光标
weixin_33682790的博客
11-19 3242
把光标颜色设置为透明色和父类一样就看不出来了，就好像取消了caret-color: transparent; 设置了这个属性后，无论如何点击都好像没有光标似的 转载于:https://www.cnblogs.com/renjianjun/p/9984550.html...
input获取焦点后不显示光标，能输入显示内容
风的轻扬
12-26 1万+
在开发的过程中会遇到各种各样的奇葩需求，这就遇到一个，input输入框输入的时候不要显示光标。不得不说这个需求太奇葩了，但是既然提出来了就得找方法去解决啊，在多番尝试之后最终解决了 // html &lt;input type="text" id='txt' placeholder="输入搜索内容"&gt; css 就能解决了 #txt { outline: n...
vue项目在ios端模糊查询首次输入不生效解决办法
最新发布
05-29
解决这个问题的具体方法可以分为两个步骤： 1. 禁用 iOS 系统的首字母大写和自动纠错功能 在 Vue 中，可以通过在输入框的属性中添加 `autocapitalize="off"` 和 `autocorrect="off"` 来实现禁用。例如： ```html <template> <div> <input type="text" v-model="value" autocapitalize="off" autocorrect="off"> </div> </template> ``` 2. 监听输入框的值变化并手动触发模糊查询 由于 iOS 系统的首字母大写和自动纠错功能已经被禁用，但是模糊查询依然不生效，因此需要在输入框的 `input` 事件中监听输入框的值变化，并根据新的值手动触发模糊查询。例如： ```html <template> <div> <input type="text" v-model="value" autocapitalize="off" autocorrect="off" @input="handleInput"> </div> </template> <script> export default { data() { return { value: '' } }, methods: { handleInput() { // 在这里手动触发模糊查询 // ... } } } </script> ``` 在 `handleInput` 方法中，你可以根据输入框的值手动触发模糊查询。具体的实现方式需要根据你的业务逻辑来决定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值