输入框在safari下失效原因

最新推荐文章于 2023-05-12 14:59:11 发布
转载 最新推荐文章于 2023-05-12 14:59:11 发布 · 2.8k 阅读 · 1

本文介绍了当在Safari浏览器中使用-webkit-user-select:none样式导致input框无法正常输入文字的问题，并提供了解决方案，即通过设置-webkit-user-select为text来恢复正常输入功能。

问题:

    safari 设置了 -webkit-user-select: none 会导致 input 无法输入

解决方案:

     -webkit-user-select: text

    https://segmentfault.com/q/1010000007946194?_ea=1500903 

tips:

jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".


-webkit-user-select(不建议使用 非官方属性)


相关:

     https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select

    http://www.css88.com/book/css/properties/user-interface/user-select.htm

safari中的input、textarea无法输入的问题
kerryqpw的博客
04-02 1498
原因是这两种表单元素上应用了user-select:none的css属性。一般没人刻意这么做，可能是这样的情况： *{ /*font-family:"PingFang SC";*/ font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB",Arial,sans-serif; -moz-user-...
h5底部输入框被键盘遮挡_微信 H5 页面兼容性解决方案
weixin_39528029的博客
10-25 1352
最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。出现原因分析：通常我们...
safari 浏览器输入框不能输入
qq_40247817的博客
02-10 3180
safari 浏览器输入框不能输入前言 前言 今天客户反馈在苹果电脑上面使用 浏览器，输入框不能输入的问题，导致用户都不能登录账号。 这里需要改成 {-webkit-user-select: auto;}
ios上safari中input标签readonly属性失效的问题
weixin_30437481的博客
03-23 610
　　遇到问题：基于cordova开发的web app中需要做一个input标签用于触发弹出框（click触发弹出框），并且禁掉input标签自带的获取焦点事件（页面滚动，弹出键盘等）。使用readonly属性在安卓自带的浏览器上面生效，但移植ios的时候发现虽然键盘未弹出，但仍然页面产生了滚动（看起来仍然是为键盘留出了位置）。 　　解决办法：使用ontouchstart禁掉此input元素的事件...
ios safari input 输入几个文字不显示的问题
z467469274的博客
04-10 2642
似乎是因为video.js 的某些 定位导致的问题 解决办法 ： input 框上加 -webkit-transform: translate3d(0, 0, 0);
Safari浏览器H5输入框点击不灵敏
05-08
还要参考用户提供的引用内容，引用1中提到了在iOS下通过全局JS监听点击事件并手动触发focus，引用2提到需要用户交互才能触发输入框的显示和获取焦点。所以解决方案可能需要结合这些点，比如在用户点击其他元素显示...
IOS键盘弹起（底部有输入框固定定位，键盘弹起时输入框在键盘上面），顶部的导航栏页面往上顶，固定定位失效
07-02
建议改用绝对定位结合 JavaScript 动态计算位置，或者将输入框放置在页面底部可见区域，并通过监听键盘事件动态调整样式。 例如，在键盘弹出时为输入框添加一个相对定位样式： ```css .input-wrapper { position:...
在 React/Vue 中如何实现输入框自动聚焦并唤起软键盘？
最新发布
11-21
引用[3]：解决iOS下软键盘弹出导致fixed布局失效的问题，采用绝对定位（absolute）布局来替代固定定位（fixed）。但这个问题与我们当前关注的自动聚焦并唤起软键盘关系不大，可以暂时忽略。 综合以上，我们可以给出...
HTML5输入框fixed定位底部的跨平台兼容性解决方案
然而，这种方法在Safari浏览器中可能会失效，因为Safari在虚拟键盘弹出时可能会改变页面滚动行为，导致`window.scrollTo`不起作用。 3、进一步优化 为了应对Safari的兼容性问题，可以考虑监听`resize`事件，当键盘...
Bug: Safari浏览器input框placeholder和内容都不显示
彭世瑜的博客
06-24 1841
input 增加一个样式 line-height:1
safari 浏览器 input textarea select 等不能响应用户输入
dengla6847的博客
04-12 473
解决办法 -webkit-user-select:auto; /*webkit浏览器*/ user-select:auto; -o-user-select:auto; -ms-user-select:auto; 转载于:https://www.cnblogs.com/lguow/p/10696837.html...
移动端-webkit-user-select:none导致input/textarea输入框无法输入
verwei的博客
04-15 1987
最近在做一个h5推广页面，修修改改，总是有很多的小问题，还是归于自己不细心，还有一点就是有一些css3的属性不太熟悉。跟后端程序猿对接的时候，导致各种打包
-webkit-user-select: none;导致的移动端input=text 无法输入
GUK
11-08 2175
解决办法： * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; } *:not(input,textarea)...
user-select使用方法（CSS禁止用户选择复制）
dreamy_wx的博客
05-08 1036
CSS禁止用户选择复制 -webkit-user-select:none ; -moz-user-select:none; user-select:none; PS（选值）: user-select: text | none | all | auto | contain none： 文本不能被选择 text ： 可以选择文本（默认值） all ： 当所有内容作为一个整体时可以被选择。如果双击或者...
user-select不可被用户选中
大雾起了清晨
05-12 342
项目中有这种奇葩需求，就是特定字段不让用户复制，不可被选中状态，这种应用场景最多的就是考试系统啥的吧，！
-webkit-user-select
weixin_34304013的博客
03-23 1357
-webkit-user-select: none;//不可选 -webkit-user-select: auto; //可复制
user-select介绍
精彩人生
01-31 901
来源：http://www.qianduan.net/introduce-user-select.html 这是在css3 UI规范中新增的一个功能，用来控制内容的可选择性。 用法： 1 user-select:value; 值： auto——默认值，用户可以选中元素中的内容 none——用户不能选择元素中的任何内容 t
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值