强制将焦点设置回 Firefox 中的 contenteditable 文档

Question

适用于除 Firefox 以外的所有浏览器

function editorFocusLost(event) {
    // Trying to set focus back
    setTimeout(function() {
        $editorBody[0].focus();
    }, 4);
}
// Listen for focus lost event
$editorBody[0].addEventListener('DOMFocusOut', editorFocusLost, false);

我也尝试了一些不同的事件，如 'focuslost'、'blur'、'DOMFocusOut'，但它在 Firefox 中不起作用。但是我们可以通过变通办法解决模糊问题。然而，将焦点设置回来的主要问题 $editrBody[0].focus() 也不会在 Firefox

中触发

https://jsfiddle.net/mm1mbqto/1/

Answer 1

DOMFocusOut 事件在 firefox 中不起作用；你必须使用模糊事件。

唯一的问题是最初的焦点，在 firefox 中焦点最初没有设置为 contenteditable，这可能是由于 jsfiddle 本身的问题。我在 jsbin 中试过，效果很好。

(function($) {

  var $body = $('.editor');
  $body[0].focus();

  function editorFocusLost(event) {
    setTimeout(function() {
      $body[0].focus();
    }, 4);

  }
  $body[0].addEventListener('blur', editorFocusLost, false);

})(jQuery);

.container {
  margin: 0 auto;
  width: 100%;
  padding: 50px;
}
.editor {
  width: 300px;
  height: 100px;
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <label for="">Editor</label>
  <div class="editor" contenteditable="true"></div>
  <input>
</div>

强制将焦点设置回 Firefox 中的 contenteditable 文档

Force set focus back to contenteditable document in Firefox

javascript

firefox

jquery

setfocus