防止 jQuery UI 对话框中的链接或按钮的即时焦点？答案

【问题标题】：Preventing instant focus of links or buttons in a jQuery UI Dialog?防止 jQuery UI 对话框中的链接或按钮的即时焦点？
【发布时间】：2011-03-25 23:34:28
【问题描述】：

我的某些页面中有两个不同的模式对话框。一个有一个<input type="button"/>，另一个有一个常规的<a href=""> 链接。当这些模式出现时，它们会在这些元素周围显示（至少在 Mac OS X 上的 Chrome 中）一个粗蓝色边框。当我在 SO 上键入这个问题时，我在文本区域周围有相同的蓝色边框，但这是理想的效果。我想摆脱我描述的元素周围立即出现的蓝色焦点边框。有什么帮助吗？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

这应该可以解决问题（CSS）：

*{    
    outline:none;
}

【讨论】：

这修复了其中一个对话框，但另一个对话框仍然在<button> 周围有一个“轮廓”。这行 CSS 是最后一个文件中的最后一行，因此它应该优先于任何其他样式。

【解决方案2】：

我知道这是一个老问题，但我只是在研究如何从 jQuery UI 对话框中的链接和按钮中移除焦点。我的意思不仅仅是大纲（您可以像其他答案所建议的那样使用 css 来做），而是实际的焦点，这样如果用户按 Enter 键，它就不会将他带到链接或按钮指向的位置。

似乎最好的方法是将其添加到对话框的 JS 中：

open: function(){
  $('#my-dialog :link').blur();
  $('#my-dialog :button').blur();
}

其中“my-dialog”是对话框的id。

或者，如果您想定位类，也可以这样做：

open: function(){
  $('.ui-widget-content :link').blur();
  $('.ui-widget-content :button').blur();
}

我认为这会更好地回答您的问题，因为您询问的是焦点，这应该消除焦点和轮廓。

【讨论】：

作为后续，我刚刚在按钮选项之后添加了open: 功能，并且刚刚添加了$('button')。没有为我使用 id/class 和 :button。
我喜欢这个解决方案，接受会从我的链接中删除鼠标悬停效果。