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

How to make a readonly text field writable using JavaScript?

本文关键字：字段 文本 只读 何使用 JavaScript      更新时间：2023-09-26

我想在单击按钮时启用文本字段（其 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;
}

我想你想让它可写。

由于您正在设置 readOnly 属性，因此应readOnly属性更改为 false 。

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

演示

或者你可以让它在HTML中disabled，那么你的代码就可以工作了。

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>

试试这个 

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

这很简单。你试图改变disabled而你真的应该改变readonly。您也可以只使用禁用并一起保留为只读。

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

希望有帮助，这是一个演示证明！

相关文章：