仅在将某些数据提取到其中后使文本框变为只读答案

【问题标题】：Making a text box read only after some data is fetched into it仅在将某些数据提取到其中后使文本框变为只读
【发布时间】：2012-02-02 07:56:02
【问题描述】：

我有一个文本框和它旁边的控制按钮。单击该按钮将调用另一个函数，其中一些数据被选择并写回文本框。目前我的文本框在数据后可由用户编辑提取到文本框。我想让文本框在用户单击按钮后只读，并将数据提取到文本框，这样现在数据就出现在文本框中，无法编辑。如果用户必须更改数据，用户必须再次单击按钮调用该函数，这将帮助我们在文本框中覆盖数据。我如何在 javascript 中完成此操作。

【问题讨论】：

标签： javascript html

【解决方案1】：

你可以这样做

HTML：

<input type="text" id="mytextbox" value="click the button below."/>
<input type="button" value="click" onclick="changeText();"/>

Javascript：

function changeText(){
   var text_box = document.getElementById('mytextbox');
    if(text_box.hasAttribute('readonly')){   
        text_box.value = "This text box is editable.";
        text_box.removeAttribute('readonly');
    }else{       
        text_box.value = "This text box is read only.";
        text_box.setAttribute('readonly', 'readonly');   
    }
}

小提琴示例： http://jsfiddle.net/b7jAy/

【讨论】：

【解决方案2】：

您可以使用jQuery .attr() 函数来设置文本字段的只读状态。

$('#textfield').attr('readonly', true);
$('#textfield').attr('readonly', 'readonly');

【讨论】：

你不应该认为 OP 正在使用 jquery。

【解决方案3】：

请尝试使用 JQuery。将其用作 Javascript 框架的数千个理由。以下是对您问题的答复：

Add "readonly" to <input > (jQuery)

希望对你有帮助，

【讨论】：

你不应该认为 OP 正在使用 jquery。

【解决方案4】：

将id 属性分配给文本框，例如<input id=foo>，然后使用

document.getElementById('foo').readOnly = true;

【讨论】：