Невозможно «сфокусировать» редактируемый элемент `div`

Question

Я хотел бы установить фокус на один из элементов div contentEditable. но не работает.

вот мой код:

$(document).click(function() { 
 
    $('div').focus(); 
 
});

div{ 
 
    border:1px solid red; 
 
}

<div contentEditable >&nbsp;</div>

Answer 1

Вот рабочий фрагмент кода без использования JQuery (который вы не загрузите в вашем фрагменте кода). Я также добавил идентификатор, чтобы получить правильный div.

document.getElementById('edit-me').focus();

div { border:1px solid red; }

<div id="edit-me" contentEditable>&nbsp;</div>

Answer 2

Импорт JQuery! Ура!

$(document).ready(function() { 
 
    //I replaced "click" with "ready" because think that you want to focus once loaded, not once you click somewhere in the document. 
 
    //"click" can still be used if you want to focus once you clicked somewhere in your window 
 
    $('div').focus(); 
 
});

div{ 
 
    border:1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div contentEditable >&nbsp;</div>

Answer 3

Вы не должны ждать, пока весь документ будет загружен до выполнения JQuery.

$(document).ready(function() { 
 
    $('div').click(function() { 
 
     $('div').focus(); 
 
    }) 
 
});

div{ 
 
    border:1px solid red; 
 
}

<div contentEditable >&nbsp;</div>