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

Question

I want to enable the text field (its id is name_text_field ) when clicking the button (its id is name_button ). But my code is not working.

Here is my HTML code:

<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>

Here is my JavaScript code:

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

Answer 1

I think you want to make it writable.

Because you are setting the readOnly property you should change readOnly property to false .

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

DEMO

Or you can make it disabled in HTML, then your code will work.

Answer 2

disabled and readonly are two completely different things.

If you want your element to start disabled, use

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

Demo:

 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

try this

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

Answer 4

It's pretty simple. You were attempting to change disabled when you really should have been changing readonly . You could also just use disabled and leave readonly out all together.

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;
}

Hope that helps & here is a demo for proof!