如何防止输入字段获得键盘焦点？答案

【问题标题】：How to prevent input fields from gaining keyboard focus?如何防止输入字段获得键盘焦点？
【发布时间】：2014-04-22 07:09:57
【问题描述】：

我在 HTML5 中实现模式对话框时遇到问题：https://github.com/Semantic-Org/Semantic-UI/issues/733

我想在模态对话框可见时以编程方式禁用所有背景输入字段的焦点。 有没有办法以编程方式防止 HTML 输入字段获得键盘焦点？

【问题讨论】：

将它们设置为readonly，当然这不适用于复选框/收音机等。disabled 适用于所有人，但如果元素在表单中，则不会发布值
借助 jQuery，您可以使用 blur() 函数：w3schools.com/jquery/event_blur.asp 例如$('input').blur()
您是否维护表单中的所有输入字段？

标签： javascript html focus

【解决方案1】：

如果您要维护表单中的所有输入字段，请在模型对话框打开时尝试此操作

var form = document.getElementById("your_form_id");
var elements = form.elements;
for (var i = 0, len = elements.length; i < len; ++i) {
    elements[i].readOnly = true;
}

【讨论】：

【解决方案2】：

我找到了解决办法：

function startFocusJail (focusRootElement) {
   $(document).off("focusin.focusJail");
   $(document).on("focusin.focusJail", function(event) {
      if (event.target !== focusRootElement && !$.contains(focusRootElement, event.target)) {
         focusRootElement.focus();
      }
   });
}

function stopFocusJail() {
   $(document).off("focusin.focusJail");
}

如果DIV 作为focusRootElement 参数传递，它必须有tabindex="-1"。

【讨论】：