По какой-то причине мне нужно использовать contenteditable div вместо обычного ввода текста для ввода текста. (для некоторых javascript-библиотек) Он отлично работает, пока не обнаружил, что когда я устанавливаю contenteditable div с помощью display: inline-block, он фокусируется на div, даже если я выхожу за пределы div!
Мне нужно, чтобы он фокусировался на div только тогда, когда пользователь щелкает прямо на div, но не вокруг него. В настоящее время я обнаружил, что когда пользователь щелкает в другом месте, а затем нажимает на позицию, которая является той же строкой, что и div, она фокусируется на ней.
Простой пример, чтобы показать проблему:
HTML:
<div class="outside">
<div class="text-input" contenteditable="true">
Input 1
</div>
<div class="text-input" contenteditable="true">
Input 2
</div>
<div class="unrelated">This is some unrelated content<br>
This is some more unrelated content
This is just some space to shows that clicking here doesn't mess with the contenteditable div
but clicking the side mess with it.
</div>
</div>
CSS
div.outside {
margin: 30px;
}
div.text-input {
display:inline-block;
background-color: black;
color: white;
width: 300px;
}
JSFiddle для отображения проблемы
Есть ли способ (CSS или javascript оба приемлемы), чтобы заставить браузер давать фокус только div, когда его щелкают, а не щелкая по той же строке?
P.S. Я заметил, что существует аналогичная проблема (ссылка на другой связанный пост), но ситуация немного отличается, и предоставленное решение не работает для меня.