Safari Javascript 问题答案

【问题标题】：Safari Javascript IssueSafari Javascript 问题
【发布时间】：2010-12-21 06:53:36
【问题描述】：

我目前正在为我的公司（Leader Technologies）开发一个用于为罗技注册产品的 Javascript 程序。网址是： http://wwwtest.onlineregister.com/logitechreg/

我的程序在我尝试过的除 Safari 4 之外的所有单一网络浏览器（包括 IE 6）上看起来都很好。在 Safari 4 上，选择位置、语言和产品类别后，单击实际产品菜单时（ id=WHPR)，负责显示产品的 div 会显示出来，但下拉选择仍然可见。在所有其他浏览器上，下拉列表和其中的可能选择处于隐藏状态（这是预期的行为。）

直接，我的问题是我能否在 Safari 4 中成功隐藏此下拉菜单，而无需完全清空下拉菜单，然后仅使用选定的值重新填充它？如果可能的话，我宁愿不这样做，但如果这是实现我的目标的唯一方法，那么我可以另外更改站点。

我认为问题在于我在<select> 上设置了侦听器：

<select id="WHPR" class="ui-formulate-ignore" style="width: 280px; visibility: visible;" onchange="whprChanged(this);" onfocus="displaySelector(form, document.getElementById('WHPR')); document.getElementById('imageHolder').focus(); this.blur();" name="WHPR">

非常感谢大家花时间帮助我。我非常感谢本网站提供的所有帮助。

-布莱恩·J·斯蒂纳尔-

【问题讨论】：

标签： javascript html safari

【解决方案1】：

不要选择你的风格，但像你正在做的那样内联附加听众并不是很干净。为什么不利用 jQuery 处理任何浏览器差异的能力呢？您引用的页面已经在加载它。

见http://docs.jquery.com/Events/bind

【讨论】：

感谢您的建议。我没有利用 jQuery 处理任何浏览器差异的能力，因为我完全不知道 jQuery 支持该功能这一事实。这是我的第一个严肃的 Javascript 程序。我仍然对 Web 开发很熟悉，到目前为止，我只用 Javascript 创建了这个和一个用户输入验证器。但是，下次我遇到浏览器差异问题时（随着我越来越多地参与 Web 开发，很快就会出现问题），我肯定会对此进行调查。非常感谢您的建议和建议。

【解决方案2】：

我认为这是 Safari 中的某种错误 - 例如，如果您为 DIV 执行 .focus()nof 而为另一个输入元素（如文本字段），那么在单击选择框后两者都会获得焦点（或者实际上，焦点会留在选择框中，而文本框似乎只有通过比平时更粗的边框才能获得焦点）。

无论如何，实现目标的快速而肮脏的方法是从页面中删除选择框（显示：无），然后将其带回（显示：内联）。

用以下命令替换this.blur()

this.style.cssText='display:none';var select = this; window.setTimeout(function(){select.style.cssText='display:inline';},1);

如果您不使用延迟，则它不起作用 - 元素的删除和检索需要在不同的范围内。

【讨论】：

非常感谢您的建议。这非常快速且易于实施，并解决了我的问题。我必须解决的一个问题是将所有应该影响我感兴趣的元素（宽度：280px；显示：内联）的 css 放在 cssText="..." 区域中。我想使用上面的 jQuery 建议，但是由于我有时间压力并且您的解决方案运行良好，所以这就是我最终使用的。由于 IE 6 z 排序问题，我还不得不稍微修改它。如果我在一秒钟后将下拉菜单拉回来，IE6 会将它放在我的选择器 div 的顶部。谢谢。
实际上您不必将所有样式都放入 cssText 属性中。所有 CSS 声明在其本质上与早期声明的区别是附加而不是替换 - 因此在级联样式表中使用术语 CASCADING。因此，如果您在某处声明输入应为 280 像素宽，则无需再次声明。
奇怪，宽度被抹掉了。