我想要在编辑前必须先单击HTML <input type="text">元素。有点类似，在Windows或Mac OS Finder中，您需要先单击文件名才能将其变为可编辑状态。
我首先尝试将<input>设置为disabled，并使用JavaScript在单击时“启用”它。这完全符合我在Chrome中所需的功能，但在Firefox中却无法使用，因为在Firefox中，显然将其禁用会删除其对点击的反应能力。
如何以一种在现代浏览器上正常运行的方式获得这种行为？
您可以在父div上侦听，并检查是否单击了输入，然后将其启用。
更新的答案也适用于Firefox。
function enableInput() {
if(event.target.id == 'text-input-overlay') {
event.target.style.display = "none";
document.getElementById("text-input").disabled = false;
}
}<html>
<body>
<div style="position:relative;" id="container" onclick="enableInput()">
<label for="text-input">Input: </label>
<input id="text-input" type="text" disabled />
<div id="text-input-overlay" style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;" ></div>
</div>
</body>
</html>您可以使用CSS重置默认输入样式，使其看起来像普通的文本/元素。然后使用焦点和模糊事件进行切换。
const input = document.querySelector('input[type="text"]');
input.addEventListener('focus', (event) => {
event.target.classList.remove('disabled');
});
input.addEventListener('blur', (event) => {
event.target.classList.add('disabled');
});.disabled {
border: none;
background: #ccc;
}<input id="text-input" type="text" class="disabled" value="Click Me" />