Запуск onchange, даже если значение не изменилось

У нас есть этот выбор, который используется для перехода между различными категориями ссылок. «Собаки» переводят пользователя по ссылкам с собаками, «Кошки» - по ссылкам с кошками и т. д.

Вот пример использования, я не могу начать работать:

1) Пользователь выбирает «Собаки».

2) Пользователь немного прокручивает ссылки с собаками.

3) Пользователь снова нажимает "Собаки".

На этом этапе я бы хотел, чтобы страница переместилась в верхнюю часть раздела с собаками, но вместо этого второй выбор «Dogs» ничего не делает, потому что значение select не изменилось, и onChange никогда не срабатывает.

Я должен упомянуть, что мы изгнали onClick из-за проблем с доступностью.

пожалуйста, покажите код, который вы написали для этого

Chris Li 13.09.2018 18:30

Как насчет изменения select.selectedIndex = 0, после выбора пользователя?

user2575725 13.09.2018 18:31

@Arvind Это изменит отображаемое значение в выборе, что не очень хорошо.

crowhill 13.09.2018 18:35

Как насчет использования события размытия? Но пользователь все равно должен щелкнуть где-нибудь еще после выбора того же варианта.

njras 13.09.2018 18:48

Использование события размытия - плохая идея. Во-первых, пользователь должен фактически удалить фокус с выбора, чтобы действие произошло. Во-вторых, если пользователь перемещается по странице с помощью клавиатуры, переходя от элемента к элементу, событие размытия запускается для select, когда пользователь просто временно посещает select во время навигации в другом месте.

NineBerry 13.09.2018 18:54
0
5
81
1

Ответы 1

С точки зрения доступности вы не хотели бы полностью полагаться на событие onClick для этого действия (WebAIM на мероприятии onClick).

Тем не менее, как говорится в статье, в случае большинства современных браузеров нажатие клавиши ввода на элементах управления формой (включая <select>) вызовет событие onClick.

Лучший способ полифила для старых браузеров - это поиск события keydown с ключевым кодом 13 для клавиши ввода.

Я думаю, что лучшим решением для вашего случая будет поиск onChange, onClick и keydown (где был нажат ввод), а затем принять соответствующие меры.

Вот рабочий пример для проверки событий в выбранном элементе.

Другие вопросы по теме