В Safari выбор перестает работать после размытия () используется, чтобы скрыть выпадающий - PullRequest
Новая
       5

В Safari выбор перестает работать после размытия () используется, чтобы скрыть выпадающий

0 голосов
/ 29 января 2019

У меня есть логика, которая скрывает выпадающий элемент select, вызывая blur () для него.Это работает во всех браузерах, кроме Safari.В Safari после того, как вы скроете его с размытостью, выпадающий список больше не будет отображаться.Вот репродукция ошибки: 

var count = 0;

function foo(e) {
	console.log("FOCUSSSED\nCount: " + count);
	if (count < 1) {

		var c = this
		setTimeout(function() {

			c.blur();
			console.log("BLURRRRR");
		}, 200)
	}
	count++;

}
<!DOCTYPE html>
<html>
<body>

<select onfocus="foo.call(this,event)">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  
</body>
</html>

Есть ли какое-то решение для этого?Или Apple должна исправить механику браузера.

1 Ответ

0 голосов
/ 29 января 2019

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

Iможет также подтвердить это поведение, когда элемент select нацелен на js, а слушатель события добавлен в событие фокуса, например, 

var myDropdown = document.getElementById('selectizer');

myDropdown.addEventListener('focus', function( event ) {
    console.log("FOCUSSSED\nCount: " + count);

    if (count < 1) {
        setTimeout(function() {
            event.target.blur();
            console.log("BLURRRRR");
        }, 200)
        count++;
    }
}, true);

Мой лучший совет для вас - воссоздать select с помощью HTML и CSS.Вы можете сделать это с простым CSS следующим образом: 

.menu .option {
    display: none;
}
.menu:focus .option {
    display:block;
}

Просто убедитесь, что вы даете своим div-элементам и т. Д. tabindex, чтобы показать и скрыть содержимое.

Вы также можете сделать этос JS, если хотите, или используйте любое количество готовых компонентов, которые вы найдете в быстром Google.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...