如何使 DIV 无法聚焦？答案

【问题标题】：how to make a DIV unfocusable?如何使 DIV 无法聚焦？
【发布时间】：2010-10-17 12:06:46
【问题描述】：

我遇到了一个关于 HTML 渲染的问题。

在 IE7 的 dir="rtl" 文档中，当 JavaScript 尝试将焦点设置到 DIV 元素（使用 oElement.focus() 方法）时，呈现变得混乱。上下文非常复杂，所以我想最简单的解决方法是让 DIV 无法聚焦？

有什么方法可以让 DIV 不被聚焦？

【问题讨论】：

How to make an HTML element non-focusable?的可能重复

标签： javascript html focus

【解决方案1】：

通过添加 CSS 可以轻松解决问题：

div_selector{
    pointer-events: none;
}

或者通过 jQuery 添加相同的 css ：

$(div_selector).css('pointer-events', 'none');

【讨论】：

这使它不可点击，这与不可聚焦不同。
downvoting，因为正如@Slbox 所说，指针事件涉及光标，它仍然会与键盘交互

【解决方案2】：

以下是使用 jquery 使 DIV 无法聚焦的一些方法。

    //  Set the tabindex atribute to -1.
        1)$("divid").attr('tabindex','-1');
    //  Remove the tabindex atribute if exists.
        2) $("divid").removeAttr('tabindex');
   //   This is third way.
        3) $("divid").blur();

【讨论】：

【解决方案3】：

除非您添加了 tabIndex，否则 <div> 应该无法接收焦点。

如果你添加了tabIndex，你应该删除它

document.getElementById("yourElement").removeAttribute("tabIndex");

【讨论】：

我知道这已经很老了，但我的经验表明，即使没有 tabIndex，Firefox 也会允许 div 获得焦点。（刚刚添加为其他 Google 员工的 FYI。）
请注意，带有contenteditable="true" 的 div 也可以接收焦点。

【解决方案4】：

另外，如果您想将可聚焦元素（表单输入元素等）设为不可聚焦。你可以设置：

tabIndex = "-1"

document.getElementById("yourElement").setAttribute("tabIndex", "-1");

【讨论】：

这不会使元素无法聚焦，它只会使其无法通过键盘导航访问。单击该元素仍将聚焦它。

【解决方案5】：

我不确定您是否可以使元素“无法聚焦”，但您当然可以使用其blur 方法在特定时间点将其取消聚焦：

document.getElementById("myElement").blur();

编辑：

我认为您可以通过在每次聚焦时散焦来使元素“无法聚焦”。您可以通过以下方式完成此操作：

document.getElementById("myElement").onfocus = function() {
    this.blur();
};

...或（在您的 HTML 中使用内联 Javascript）：

<div onfocus="this.blur();"></div>

史蒂夫

【讨论】：

把它弄模糊，就表示焦点已经在它上面了，对吧？如何禁用对其设置焦点？
我不确定是否可以使元素“无法聚焦”。很抱歉没有仔细阅读您的问题！