【浏览器兼容】Safari中的input输入框带有多余用户图标和modal弹框不能正常打开问题

于 2024-06-21 10:54:26 发布
阅读量402 收藏
点赞数 1
文章标签： safari 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41536505/article/details/139855107
版权

Safari中的input输入框带有多余用户图标

这其实是Safari中的自动填充， 默认是打开的， 如果不想显示，可以在打开Safari的设置，然后把自动填充的设置给关闭掉
在这里插入图片描述

在代码上面可以给输入框设置 autoComplete="off" 但是不是每次都会生效，建议少在Safari上测试

modal弹框不能正常打开或是打开之后不能正常输入

这是Safari的防御机制， 可以在设置里把下面选择的勾选取消掉
在这里插入图片描述

孟秋没Bug
关注
safari中的input、textarea无法输入的问题
kerryqpw的博客
04-02 1436
原因是这两种表单元素上应用了user-select:none的css属性。一般没人刻意这么做，可能是这样的情况： *{ /*font-family:"PingFang SC";*/ font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB",Arial,sans-serif; -moz-user-...
React Native学习资源汇总
xiangzhihong8的专栏
08-01 2529
目前主流的移动跨平台技术方案大体可以分为三类，一类是使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；另一类是使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和快应用；最后一类是使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。 对于其他的浏览器方案，基本可以抛弃了，现在我们讨论移动跨平台开发主要说的是React Native和Flutter
safari的input问题
weixin_34392435的博客
04-15 396
切图网用户体验团队QUX在手机移动触屏web前端开发中碰到一个问题 — 纯css3定义的按钮在android安卓系统下显示正常，但是在苹果ios系统下，以ipad为例，ipad下呈现渐变和圆角状态 。 而css3中根本没有定义这些样式，那么问题来了，这个样式从哪里来？追溯到这个源头，问题就可以迎刃而解。于是翻阅大量文档资料。终于查到： 原来iPhone上的safari解析input[type...
隐藏safari浏览器在输入框右侧出现的小图标
guxuehua的博客
03-21 489
隐藏safari浏览器在输入框右侧出现的小图标
如何隐藏Safari中input输入框内自带的小人图标
qubes的专栏
01-04 600
如何隐藏Safari中input输入框内自带的小人图标。
Bug: Safari浏览器input框placeholder和内容都不显示
彭世瑜的博客
06-24 1724
input 增加一个样式 line-height:1
iOS11.3以下modal中input光标错位的解决方法
08-26
iOS11.3以下modal中input光标错位的解决方法是指在iOS11.3以下的系统中，出现了input光标错位的问题，即在弹出层中输入框的光标位置不正确的问题。这个问题是由于iOS系统的BUG所导致的，幸运的是，在iOS11.3以后，这...
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
08-31
在iOS 9 中，用户可能遇到一个问题，即 Bootstrap Modal 无法正常弹出。这个问题主要由苹果的Safari 浏览器在iOS 9上的滚动条处理机制引起，导致Modal无法正确渲染并覆盖整个页面。 为了解决 Bootstrap Modal 在iOS...
移动端ios输入框自动聚焦问题
栗子的成长ing
12-25 5794
之前有遇到关于input聚焦的问题，但是一直没总结。今天有时间就整理总结以下。 一. autofocus 在pc/安卓手机上都有效，但是在ios的safari浏览器上不起作用。 因此对于ios手机上input自动聚焦问题，需要特殊处理下。 二.ios手机上，input的focus事件需要通过用户交互才能触发。 当按钮和input框在同一个页面时，可以通过切换display状态,来显示...
提升用户体验：FastAdmin中Bootstrap样式微调的专业技巧
![提升用户体验：FastAdmin中...文章详细阐述了微调Bootstrap样式的实践技巧，包括定制变量、使用Sass深度定制和应用覆盖样式的方法。进一步探讨了在FastAdmin项目中如何优化Bootstrap的加载时间、性能、交互效果
去掉mac safari浏览器input右边的小图标
weixin_42665200的博客
04-11 1566
昨天在做项目的时候，就遇到了一个小坑。mac safari浏览器中的input右边回有默认的小图标，其实这个东西也无伤大雅，但是我们要用自己的图标，两个图标在一块重叠肯定不行，所以就找办法给他去掉了。 可以在公共样式中或者单独加下面样式 // 去掉Safari浏览器下密码输入框自带的小钥匙图标 input::-webkit-credentials-auto-fill-button { di...
如何隐藏 Safari 中 input 标签的 autofill 图标
weixin_30780221的博客
01-20 298
Safari 浏览器会为<input type="passport">标签自动添加一个小锁的图标（如下图），本意上是让用户可以从这里选择相应的 用户名/密码 进行自动填充，但是在某些场景下需要将其隐藏，可能是出于安全性考虑，当然也有可能出于 UI 样式方面考虑。 从网上可以搜到很多种有效的解决方法，例如下面的代码就是其中之一，但是很少会告诉你为什么要这样做，以致于下次再遇到这...
safari浏览器下 input 表单的阴影
软件研发实战应用技术分享
11-07 3628
之前写了一个登录表单页面，再iphone上测试遇到了一些奇怪的问题：表单中的input[type=”submit”]按钮在iPhone的safari浏览器下会出现圆角的情况；input[type=”text”]文本输入框会有内阴影，这些问题该怎么处理呢？ 阴影图片： 正常图片： 在IOS下，input 表单默认会有个内阴影，一定程度上影响视觉一致，可通过设置下面代码去掉：input{
show-overflow-tooltip 在 safari 浏览器不生效
mingwei_zhu的博客
10-26 1031
上面这种情况很大的可能性是因为 此列的 .cell.el-tooltip 元素的width属性被改变了，比如 width:auto。当然还有其他原因。如果实在找不到原因就在该页面修改权重为 .cell.el-tooltip的width:100%。 如果实在找不到问题使用以下 scss 代码。 /deep/ .el-table__header, /deep/ .el-table__body, /deep/ .el-table__footer { width: 100% !impor...
safari input 行高问题解决
jiubai_9000的博客
09-07 3091
input{ width:250px; height:30px; line-height:30px; font-size:14px; padding:0px 0px 0px 30px; [;height:20px;line-height:normal;padding:10px 0 0 30px;]/*safari hack*/只在safari浏览器使用这个 padding+heigh
Safari手机浏览器中input 光标不居中解决方案
风华绝代的博客
04-12 838
在iPhone的Safari中发现了这个问题，line-height 属性不能使input输入框中的光标垂直居中，总会有偏移量。查找资料之后发现要换一写法。 height= padding + font-size; 这样通过padding方式达到的居中效果没有问题。如果高度是30px，字体大小是16px，设置line-height和字体大小相同，计算得上下内边距是7px。 input{ p...
隐藏safari表单输入项右侧出现的图标
liangxhblog的博客
07-09 1536
在safari浏览器上的表单，点击表单项，有可能出现如图所示的图标：这是浏览器自发的行为，想要隐藏这个图标，在css里加入以下代码即可。input::-webkit-contacts-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; position: abs...
去除点击 input框时黑框问题!
King Saj
09-01 3258
项目中遇到需要去掉input点击时显示的黑色边框 // css设置一下 input { outline:none };
解决 element-plus el-input组件在iOS移动端的兼容问题，点击2次才能弹出键盘
最新发布
u010753147的博客
06-14 2103
在iPhone手机浏览器（Safari、Chrome、Firefox）上测试发现，带有clearable。
Bootstrap引导程序的学习与实践
6. **兼容性处理**：在使用Bootstrap时，需要关注不同浏览器之间的兼容性问题，确保网站在主流浏览器（如Chrome、Firefox、Safari、Edge等）上能够正常显示和操作。 ### 标签知识点：HTML HTML是Bootstrap的主要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值