Проблема хорошо видна на сниппете. Я хочу прослушивать события фокуса/размытия внутри блока, доступного для редактирования, но оно запускает событие размытия сразу после фокуса, если я использую мышь (фокусировка с помощью табуляции работает с обходным решением tabindex="-1").
Я могу активировать фокус, только если дважды щелкну внутренний элемент, а это не то поведение, которое я хотел. Кроме того, даже если я сфокусировался на внутреннем элементе, он вызовет событие размытия, когда я начну печатать. Нет идей, как всего этого избежать.
const el = document.getElementById('inner')
el.onfocus = onFocus
el.onblur = onBlur
function onFocus() {
console.log('Focus')
}
function onBlur() {
console.log('Blur')
}<div contenteditable="true" tabindex="-1">
<div id="inner" tabindex="0">Inner element</div>
</div>1 ответ
tabindex на самом деле является логическим атрибутом, который использует 0 для запрета фокуса на этом элементе и 1 для разрешения фокуса на этом элементе. Таким образом, tabindex="0" делал именно то, что должен был делать: не фокусировался на этом элементе.
const el = document.getElementById('inner')
el.onfocus = onFocus
el.onblur = onBlur
function onFocus() {
console.log('Focus')
}
function onBlur() {
console.log('Blur')
}<div contenteditable="true" tabindex="-1">
<div id="inner" tabindex="1">Inner element</div>
</div>Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.
tabindex="0", который делает именно то, что он должен делать...