强制将焦点设置回 Firefox 中的 contenteditable 文档
Force set focus back to contenteditable document in Firefox
适用于除 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
中触发
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 以外的所有浏览器
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
中触发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>