如何“禁用” HTML输入元素,直到单击它?

问题描述 投票:0回答:2

我想要在编辑前必须先单击HTML <input type="text">元素。有点类似,在Windows或Mac OS Finder中,您需要先单击文件名才能将其变为可编辑状态。

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

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

javascript dom
2个回答
2
投票

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

1
投票

您可以使用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" />
© www.soinside.com 2019 - 2024. All rights reserved.