有没有办法让 HTML5 输入范围在使用时在 Safari 中获得焦点？

Question

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>

Answer 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>

有没有办法让 HTML5 输入范围在使用时在 Safari 中获得焦点？

Is there a way to make an HTML5 input range receive focus in Safari when it's used?

html

javascript

safari