如何使用JavaScript使只读文本字段可写？

Question

我想启用文本字段（它的ID是name_text_field ）点击该按钮时（其ID为name_button ）。 但是我的代码无法正常工作。

这是我的HTML代码：

<input type="text" id="name_text_field" readonly="readonly" value="name">
<button id="name_button" onclick="enableTxt()" style="color: #009dcd; color: #009dcd; border: none; background-color: #ffffff;">name</button>

这是我的JavaScript代码：

function enableTxt() {
  document.getElementById("name_text_field").disabled = false;
}

Answer 1

我认为您想使其可写。

因为您正在设置readOnly属性，所以应该将readOnly属性更改为false 。

function enableTxt() {
  document.getElementById("name_text_field").readOnly = false;
}

DEMO

或者您可以将其disabled为HTML，然后您的代码即可使用。

Answer 2

disabled和readonly是完全不同的两件事。

如果要禁用元素，请使用

<input type="text" id="name_text_field" value="name" disabled>

演示：

 function enableTxt() { document.getElementById("name_text_field").disabled = false; } 

 <input type="text" id="name_text_field" value="name" disabled> <button id="name_button" onclick="enableTxt()" style="color: #009dcd; color: #009dcd; border: none; background-color: #ffffff;">name</button> 

Answer 3

尝试这个

function enableTxt() {
  document.getElementById('name_text_field').readOnly = false;
}

Answer 4

很简单 当您确实应该更改为readonly时，您尝试更改为disabled 。 您也可以只使用禁用，而将只读保留在一起。

HTML：

<input type="text" id="name_text_field" disabled="true" value="name">
<button id="name_button" onclick="enableTxt()" style="color: #009dcd; color: #009dcd; border: none; background-color: #ffffff;">name</button>

JS：

function enableTxt() {
  document.getElementById("name_text_field").disabled = false;
}

希望对您有所帮助，这是一个演示示例！