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

【问题标题】：Is there a way to make an HTML5 input range receive focus in Safari when it's used?有没有办法让 HTML5 输入范围在使用时在 Safari 中获得焦点？
【发布时间】：2021-10-14 07:24:11
【问题描述】：

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>

【问题讨论】：

可以选择手动实现焦点吗？我的意思是，您可以根据许多事件手动更改输入样式。我知道这似乎并不理想，但原生输入在历史上已被破坏。
@ErnestoStifano 我可以手动对焦，但是一旦范围滑块开始移动，它就会失去焦点。

标签： javascript html safari

【解决方案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>

【讨论】：