如何使用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;
}

希望對您有所幫助，這是一個演示示例！