Question

我想要一个HTML <input type="text">元素，必须先单击它才能进行编辑。在Windows或Mac OS Finder中，您需要先单击文件名，然后才能将其变为可编辑状态。

我首先尝试将<input>设置为disabled，并使用JavaScript在单击时“启用”它。完全符合我在Chrome中所需的功能，但在Firefox中却无法使用，因为在Firefox中，显然将其禁用会删除其对点击的反应能力。

如何以一种在现代浏览器上都能正常运行的方式获得这种行为？

Answer 1

您可以在父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>

Answer 2

您可以使用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" />

如何“禁用” HTML输入元素直到被点击？

2 个答案: