Блог

Главная - Вопросы по программированию - Есть ли способ заставить диапазон ввода HTML5 получать фокус в Safari при его использовании?

Есть ли способ заставить диапазон ввода HTML5 получать фокус в Safari при его использовании?

#javascript #html #safari

Вопрос:

Safari (по крайней мере, v14), похоже, не поддерживает фокусировку на диапазоне ввода. Даже если я использую javascript для ручной фокусировки на элементе DOM, он теряет фокус, как только вы начинаете перемещать дескриптор диапазона. Есть ли способ заставить Safari сосредоточиться и оставаться сосредоточенным во время его использования? Другие браузеры, такие как Chrome и Firefox, по-видимому, сохраняют фокус во время использования.

 var text = document.getElementById("text");
var range = document.getElementById("range");
var button = document.getElementById("button");

var log = function(e) {
  console.log(e.type, e.target.type);
};

document.addEventListener("focusin", log);
document.addEventListener("focusout", log);

text.addEventListener("focus", log);
text.addEventListener("blur", log);

range.addEventListener("focus", log);
range.addEventListener("blur", log);

button.addEventListener("click", function() {
  range.focus();
}); 
 input {
  outline: 1px solid red;
}

input:focus {
  outline: 1px solid green;
} 
 <label>Range <input tabindex="0" id="range" type="range" value="50" /></label>
<button id="button" type="button">Focus</button>
<br />
<label>Text <input tabindex="1" id="text" type="text" value="Text" /></label>

Комментарии:

1. Можно ли вручную реализовать фокус? Я имею в виду, что вы можете вручную изменить стиль ввода на основе многих событий. Я знаю, что это не кажется идеальным, но исходные данные исторически сломаны.

2. @ErnestoStifano Я могу вручную сфокусировать его, но затем он теряет фокус, как только ползунок диапазона начинает двигаться.

Ответ №1:

Поскольку он не поддерживается, вы можете обернуть диапазон ввода внутри элемента с помощью tabindex и подделать тот же эффект.

 var text = document.getElementById("text");
var range = document.getElementById("range");
var label = document.getElementById("label");
var button = document.getElementById("button");

var log = function(e) {
  console.log(e.type, e.target.type || e.target.tagName.toLowerCase());
};

document.addEventListener("focusin", log);
document.addEventListener("focusout", log);

text.addEventListener("focus", log);
text.addEventListener("blur", log);

range.addEventListener("focus", log);
range.addEventListener("blur", log);

label.addEventListener("focus", log);
label.addEventListener("blur", log);

button.addEventListener("click", function() {
  range.focus();
}); 
 input {
  outline: 1px solid red;
}

input:focus,
#label:focus input {
  outline: 1px solid green;
}

#label:focus {
  outline: none;
} 
 <span id="label" tabindex="-1">Range <input tabindex="0" id="range" type="range" value="50" /></span>
<button id="button" type="button">Focus</button>
<br />
<label>Text <input tabindex="1" id="text" type="text" value="Text" /></label>
Метки: