Мобильная версияКод: Выделить всё
const elementSet = {
input: document.querySelector("input"),
buttonToFocusOn: document.querySelector("button:first-of-type"),
buttonFocusOnInput: document.querySelector("section button:first-of-type"),
buttonFocusOnButton: document.querySelector("section button:last-of-type"),
};
elementSet.buttonFocusOnInput.onclick =
() => elementSet.input.focus();
elementSet.buttonFocusOnButton.onclick =
() => elementSet.buttonToFocusOn.focus();< /code>
Button to focus on
Focus on input
Focus on first button
Пожалуйста, поймите, что я вырезал многие углы в этом коде, чтобы продемонстрировать проблему - самый простой способ.
Описание проблемы
Функция элемента () во всех случаях может быть легко тщато. Тем не менее, состояние фокусировки элемента Focuses не всегда производится. Проблема появляется, когда я нажимаю на другую кнопку, и ее нажатие обработчик фокусирует другую кнопку, только когда элемент фокусируется, является кнопкой, и только для нажатия мыши. Если кнопка активируется клавиатурой, все работает правильно. < /P>
I воспроизводил проблему с использованием различных двигателей: Blink+V8 (Chromium, Google Chrome, Vivaldi, Opera (только для Windows) и Mozilla Quantum+Gecko (Firefox). /> [*] Нажмите кнопку «Фокус на вводе» < /code> или активируйте ее с помощью клавиатуры. Во всех случаях элемент ввода активируется, и эффект фокусировки проявляется правильно. Он фокусирует кнопку «Кнопка», чтобы сосредоточиться на ». Чтобы подтвердить это, нажмите на пробел. Это может или не может выявить состояние фокусировки кнопки сфокусированной. В качестве альтернативы нажмите на вкладку; Как и ожидалось, он переместит фокус к следующему управлению, то есть к кнопке «Фокус на вводе» .
Проблема: сразу после нажатия «Focus on First кнопка» , кнопка правая кнопка сфокусирована, но визуально, состояние фокуса не соответствует кнопке. космический промежуток. То есть вызовите обработчик этой кнопки, не касаясь мыши. В этом случае все работает правильно: кнопка «кнопка« Фокус »на« не только фокусируется, но и состояние фокуса отображается правильно.
Что я попробовал?elementSet.buttonFocusOnButton.onclick =
() => elementSet.buttonToFocusOn.focus();
< /code>
Использование < /p>
elementSet.buttonFocusOnButton.onclick =
() => setTimeout(() => elementSet.buttonToFocusOn.focus());
// optionally, with some non-zero delay
< /code>
Теперь он что -то меняет, отсутствие рендеринга состояния фокуса все еще происходит. Демонстрационное приложение для одного из моих компонентов, опубликованных в 2015 году, привлекло большое внимание и очень положительные отзывы. В то время я пропустил проблему. Компонент, как и многие другие компоненты, временно показан. Таким образом, во многих приложениях, после использования компонента, очень важно сосредоточиться на каком -то другом элементе, чтобы сделать рабочий процесс пользователя наиболее наводящим на мысль, в зависимости от выбора предыдущего пользователя. Это действительно ошибка, а не функция? /> Спасибо! < /p>
Подробнее здесь: https://stackoverflow.com/questions/797 ... om-a-click
