Safari 不支持 <option> 用 display: none 隐藏

最新推荐文章于 2021-09-17 15:12:38 发布
最新推荐文章于 2021-09-17 15:12:38 发布
阅读量740 收藏
点赞数
分类专栏： 日常开发的小问题 文章标签： safari
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44273383/article/details/104837404
版权

1. 环境：

  • macOS 版本：10.15.3
  • Safari 版本：13.0.5

2. 问题描述：

如题，就是个兼容问题

3. 解决办法：

写一个方法，根据条件返回重构后的 options。

尹宇星 Kim
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一文掌握CSS 属性display:flow-root声明
11-20
这个属性最初可能由于兼容性问题而不被广泛使用，但随着浏览器对它的支持度不断提升，尤其是在Safari浏览器从版本13开始支持`display:flow-root`，它逐渐成为了一个实用的工具。 ### 一、`display:flow-root`的作用...
SELECT标签中OPTION的显隐控制(兼容IE和Safari)
Lime的博客
11-23 3157
问题描述： 在有些功能切换的时候，select标签中的某些option是要被隐藏的。但通过设置option的样式为 display:none根本无法隐藏option标签。 解决方案： 1、首先设置option的display:none的方案肯定是不可行了； 2、在option标签上面加上disabled="disabled"属性，表示不可用，这种方案只是让option不能选择，但没有隐藏掉...
safari浏览器display:none;但是依然显示的处理办法
qq_15697653的博客
03-18 3126
需要看一下在切换为display:none前，display是否为contents，如果是的话，改为display: block;
巧妙解决display：none元素无法输入的问题！全网最优解
m0_57024162的博客
09-17 1338
巧妙解决display：none元素无法输入的问题 在使用selenium进行模拟浏览器操作时，大多数时候都能正常的完成输入和点击的问题，前提就是能定位的元素，而有些元素的display为none，这就导致了我们通过selenium脚本是无法定位到这个元素的。目前网上大多数方法都是通过js方法修改元素的display属性，但经过我的测试，并不是非常凑效。但是有一种方法，不仅比js方法更简单，而且更有效！！！ 那就是———Helium！ Helium的安装方法很简单，win10系统只需要打开cmd命令然后输入
safari选项卡乱_Safari掌握选项卡的完整指南
09-13 778
safari选项卡乱Tabs, glorious tabs! Every web browser now has them, including Apple’s Safari.In fact, tabs have been a part of Safari since the very beginning, butthere’s a lot more to them than you may ...
option中css失效,option.style.display =“ none”在野生动物园中不起作用
weixin_42566072的博客
08-04 649
HTML：helloI'M THE CHOSEN ONEasdwerqweJS：var sel = document.getElementById("asd");var optnz = sel.getElementsByTagName("option")[1];sel.value = optnz.value;optnz.style.display = "none";如您所见，它在chrome中有效...
ios 自定义隐藏或显示option
wangc_gogo的博客
07-06 727
/* * jq对象，要显示那些元素[],要隐藏那些元素[] */ function toggleOptionShow(obj,arrShow,arrHide){ function arrHandle(arr,type){ if($.isArray(arr)){ var len=arr.length; for(i=0;i&...
ios 下 select和option 无法隐藏指定元素
qq_34569508的博客
07-06 102
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>产品</title> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> ...
通过JavaScript改变节点样式在不同浏览器平台不同表现（safari）
Senar的博客
09-13 235
在safari上，有时会出现例如 document.getElementById('id').style = "display: none"; 这种写法有时会不生效，所以大家最好改为这种写法： document.getElementById('id').style.display = "none"; 关于一些特殊的属性只需改为camel命名法就好了：font-size fontS...
CSS属性display:inline-block用法深入理解
12-13
- 对于那些不支持`display:inline-block`的老版本浏览器，可以使用CSS hack或者使用JavaScript库如Modernizr来实现兼容。 总之，`display:inline-block`是CSS布局中一个强大而灵活的工具，但需要注意浏览器兼容性和...
iphone safari不支持position fixed的解决方法
09-05
然而，苹果的iPhone Safari浏览器在早期版本中并不完全支持这个属性，尤其是在处理滚动事件时会出现问题，导致元素在滚动时无法正确保持其固定位置，这给开发者带来了一些挑战。 为了解决这个问题，开发者通常需要...
IOS中safari下的select下拉菜单文字过长不换行的解决方法
09-01
在iOS的Safari浏览器中，`<select>`下拉菜单中的长文字选项可能会导致显示问题，尤其是当文字过长而不换行时，这会影响到用户体验。为了解决这个问题，开发者通常需要寻找一种方法来确保长文本在下拉菜单中正确显示...
javascript各浏览器中option元素的表现差异
12-04
对于不支持直接在`<option>`元素上绑定事件的浏览器，可以将事件监听器添加到`<select>`元素上，并通过判断`event.target`或`event.srcElement`来确定触发事件的是哪个`<option>`。同时，如果需要在IE6中实现`...
Safari下input样式无法设置的问题
weixin_30785593的博客
05-16 410
input 加上-webkit-appearance:none;无效，加上display: none;即可 转载于:https://www.cnblogs.com/zhuqixiong/p/10877306.html
safri 对于display:block;的元素显示不出来 其他所有浏览器均正常
扬帆前行
01-11 2245
今天遇到一个比较坑的问题，就是别的浏览器打开页面都是正常的，唯独只有mac自带的safari浏览器不显示 ，我审查元素 发现这个块是存在的而且是display:block但是就是不存在，1.首先想到的是对于这个是不是mouseover和mouseout事件没执行，结果发现并不是，因为它的指向箭头是变化的，说明事件是执行的 2.我是用得固定定位 所以再次排查是否是固定定位引起的，结果显示也并不是，...
js,html在safari浏览器中兼容问题及解决方法记录
一给窝里Giao的博客
03-23 2498
1.在safari中非点击元素的标签不能触发自动点击 比如div span a标签等 解决方法： 1.只有input和button元素在所有浏览器中有点击事件（最简单的办法，使用这两个元素代替） 2.使用dispatchEvent来触发 dispatchEvent 2.a标签在safari中无法下载 解决方法： 1.标签不能加display:none; 2.用事件冒泡触发，参考问题一 3.in...
解决option设置display：none不兼容ie的问题
A_bet_of_three_years的博客
05-13 3787
注意：1.option设置display：none不兼容ie的问题 2.option的外包含标签和内包含标签浏览器都不读取自动拦截，也不报错。 解决display：none的兼容问题 &lt;!DocType html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;/head...
IE浏览器不支持display:none导致option不能隐藏的问题
韦观松のBóKè
04-28 9898
项目场景：级联的select元素，根据一级select的选择，二级select中的option选项需要对应的隐藏或显示。 原来的做法是display:none和display:block来隐藏和显示option，option中通过自定义属性data-category过滤，控制option的隐藏或显示，结果在IE浏览器中并不能达到想要的效果，通过网络查找，是因为IE浏览器不支持display:no
Safari 中 JS 报错：Unhandled Promise Rejection: NotAllowedError
猿海无涯，码农无边
03-13 4049
1. 环境： macOS 版本：10.15.3 Safari 版本：13.0.5 2. 问题描述： 在 JS 代码中，直接使用代码执行 <audio> 的播放。 3. 解决方法 这个权限错误是因为 Safari 默认不允许静默的播放音频，需要通过 UI 交互（比如页面上放个按钮）来触发。可以通过下面的流程获得权限： 1⃣️ 点击左上角「Safari浏览器」» 2⃣️ 点击「偏好...
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>1-用户登录</title> <style type="text/css"> a{text-decoration:none} body{ background-image:url(../img/longmao.webp); background-size: cover; height: 100vh; } h3{ color:#FFF; font-size:30px; } td{ color:#FFF; font-size:20px; } .ps{ padding-top:0px; } </style> <script type="text/javascript"> function refreshVerifyCode() { // 刷新验证码 var verifyCodeImage = document.getElementById("verify_codeImage"); verifyCodeImage.src = "../VerifyCodeServlet?" + Math.random(); } function register() { window.location.href = "register.jsp"; } </script> </head> <body > <h3>新闻发布系统>>用户管理>>登录</h3><hr color="#FFF"> <div class="ps"> <form action="../LoginSerlvet" method="post" name="frm_login"> <table align="center"> <tr> <td>用户名：</td> <td> <input type="text" name="userName"value="张凯"> </td> </tr> <tr> <td>密码：</td> <td> <input type="password" name="userPassword" value="1111"> </td> </tr> <tr> <td>验证码：</td> <td> <input type="text" name="verifyCode" value=""> <img src="../VerifyCodeServlet?t=<%=System.currentTimeMillis()%>" id="checkcode" onclick="this.src='../VerifyCodeServlet?t='+new Date().getTime()"/> </td> </tr> <tr> <td height="50" colspan="2" align="center"> <input type="submit" name="ok" value="提交"> <input type="reset" name="cancel" value="取消"> <input type="button" onclick="register();" value="注册"> </td> </tr> </table> </form> </div> </body> </html>加一个3.Ajax异步验证。登录时账号输完马上显示账号重复了。
最新发布
06-08
好的，你的要求是在这段代码中加入一个 Ajax 异步验证，当用户输入账号时，立即检测账号是否已存在，并给出相应提示。我给你提供一种实现方式，你可以将以下代码插入到 `<head>` 标签中： ``` <script type="text/javascript"> function checkUsername() { var xmlHttp; try { xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari } catch (e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器不支持AJAX！"); return false; } } } xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4) { var responseText = xmlHttp.responseText; if (responseText == "0") { document.getElementById("username_message").innerHTML = "该账号已存在，请重新输入"; } else { document.getElementById("username_message").innerHTML = ""; } } }; var username = document.getElementById("username").value; xmlHttp.open("POST", "../CheckUsernameServlet", true); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.send("username=" + username); } </script> ``` 然后，在用户名输入框中加入 onblur 事件，调用 checkUsername() 函数进行账号验证。同时，在页面中加入一个 `<span>` 标签，用于显示账号是否重复的提示信息。修改后的代码如下： ``` <tr> <td>用户名：</td> <td> <input type="text" name="userName" id="username" value="张凯" onblur="checkUsername()"> <span id="username_message"></span> </td> </tr> ``` 最后，在服务器端编写一个 CheckUsernameServlet，用于接收客户端发来的账号信息，检查账号是否已存在，然后将结果返回给客户端。这个部分的代码需要根据你的具体情况进行编写，这里不再赘述。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值