如何在点击时启用输入框？

Question

我有以下输入：

<input type="text" value="John Smith" onClick="editUserName()" id="userNameInput" disabled>

它假设在用户点击它时激活，因此可以对其进行编辑：

var userNameInput = document.getElementById("userNameInput");
function editUserName () {
    userNameInput.disabled = false;
}

我已经尝试过disabled和disabled="disabled" ，似乎没有任何效果。 这是什么问题？

Answer 1

问题是它被禁用了

试试onmouseover

Answer 2

我想你也可以删除属性：

userNameInput.removeAttribute("disabled");

我相信当你将disabled属性设置为'disabled'时，它会保持禁用状态。

Answer 3

这里的问题是，至少在某些浏览器中， disabled属性会阻止任何用户与元素的交互。 这意味着click和mouseover事件都不会在这些浏览器中注册。 你可以做的就是创建自己的类来模仿disabled样式，以便仍然触发事件。

我做了一个可行的例子的演示 。

Answer 4

您可以将输入元素放在某个div中并捕获事件并删除禁用的attribite。

<div onClick="editUserName()">
 <input type="text" value="John Smith" id="userNameInput" disabled>
</div>

var userNameInput = document.getElementById("userNameInput");
function editUserName () {
   userNameInput.removeAttribute("disabled");
}

演示： http ： //jsfiddle.net/27Syr/644/