如何使一个DIV无法获得焦点？

Question

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

在IE7的dir="rtl"文档中，当JavaScript尝试将焦点设置到一个DIV元素（使用oElement.focus()方法）时，渲染会变得混乱。由于上下文非常复杂，因此我认为最简单的解决方法是使DIV不可聚焦？

有没有办法让一个DIV元素无法获得焦点？

- Morgan Cheng

---

可能是重复的问题：如何使HTML元素无法聚焦？ - thSoft

Answer 1

<div>元素不应该能够获得焦点，除非你添加了 tabIndex 属性。

如果你已经添加了 tabIndex，可以通过以下方式将其删除：

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

- Mister Lucky

---

我知道这个问题很老，但我的经验表明，即使没有设置tabIndex属性，Firefox仍然允许div元素获得焦点。（只是为了提供给其他搜索者参考。） - Vaccano

请注意，带有 contenteditable="true" 的 div 元素也可以获得焦点。 - thdoan

Answer 2

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

tabIndex = "-1"

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

- Robin Maben

---

这并不会使元素无法聚焦，只是使其在键盘导航中无法到达。点击该元素仍然会将其聚焦。 - blid

Answer 3

我不确定你是否可以使一个元素“无法聚焦”，但是你肯定可以在特定的时间点使用它的blur方法取消聚焦：

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

编辑：

我认为你可以通过在每次元素被聚焦时取消其聚焦来使元素“无法聚焦”。您可以通过以下方式实现：

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

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

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

史蒂夫

- Steve

---

要模糊它，这意味着焦点已经在它上面了，对吧？ 如何禁用将焦点设置在它上面？ - Morgan Cheng

我不确定是否可以使一个元素“无法聚焦”。很抱歉没有仔细阅读你的问题！ - Steve Harrison

Answer 4

以下是使用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();

- Sheo Dayal Singh

Answer 5

这是我过去项目中的一个纯CSS解决方案

/* Prevents all mouse interactions */
.disabled-div {
  opacity: 0.5;
  pointer-events: none;
}

/* Prevents all other focus events */
.disabled-div:focus,
.disabled-div:focus-within {
  visibility: hidden;
}

<h1>CSS Only Disable with Prevent Focus</h1>

<input placeholder="Normal text field">
<br><br>
<input class="disabled-div" placeholder="Disabled text field">
<br><br>
<input placeholder="Normal text field">
<br><br>
<input class="disabled-div" placeholder="Disabled text field">
<br><br>

当它接收到焦点时会稍微闪烁。这是因为当它接收到焦点时，可见性被设置为“隐藏”，然后失去焦点并将可见性重新设置为“可见”。实际上，这是好的，因为用户现在可以在禁用字段上移动时知道焦点所在的位置...

- Ghanashyam Sateesh

Answer 6

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

div_selector{
    pointer-events: none;
}

或者通过jQuery添加相同的CSS： < p > < code > $（div_selector）.css（'pointer-events'，'none'）;

- nitin kujur

---

这使得它无法被点击，这与无法聚焦是不同的。 - Slbox

因为正如@Slbox所说，指针事件涉及鼠标，并且它仍将与键盘交互，所以我不赞同投反对票。 - Caleb Taylor