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

Question

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

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

Answer 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;
}

Answer 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"。