Javascript 如何在单击时启用输入框？

我有以下意见：

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

我试过禁用

和
disabled=“disabled”
，似乎没有任何效果。
这里有什么问题？
问题是它被禁用了

尝试使用mouseover
我认为您也可以删除该属性：

userNameInput.removeAttribute("disabled");

我相信，当您将disabled属性设置为“disabled”时，它只会将其保持为禁用状态。
这里的问题是，至少在某些浏览器中，
disabled
属性会阻止用户与元素进行任何交互。这意味着
单击
和
鼠标悬停
事件都不会在这些浏览器中注册。要解决这个问题，您可以创建自己的类，模仿禁用的
样式，这样事件仍然会被触发

我已经制作了一个可行的示例。
您可以将输入元素放在某个div中，捕获事件并删除禁用的属性

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

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


var userNameInput=document.getElementById（“userNameInput”）；
函数editUserName（）{
userNameInput.removeAttribute（“已禁用”）；
}

演示：
Try
userNameInput.removeAttribute（'disabled'）=false也应该起作用-问题是它是禁用的如果输入框应该是可编辑的，那么禁用它有什么意义？这似乎是一个错误。你到底想做什么？如果它没有被触动，可能就不会发送到服务器上？嗯，它是“用户配置文件”信息显示的一部分，除非用户点击它，否则它不应该被编辑。我知道我可以用另一种方式工作，但它们看起来有点复杂。。。有没有办法让它像我尝试的那样工作？只在实际执行的事件中
<div onClick="editUserName()">
 <input type="text" value="John Smith" id="userNameInput" disabled>
</div>

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