切换只读或禁用属性时，附加文本未显示在文本区域中答案

【问题标题】：Appended text not showing in textarea when toggling readonly or disabled attributes切换只读或禁用属性时，附加文本未显示在文本区域中
【发布时间】：2014-10-29 03:23:44
【问题描述】：

我有一个文本区域，我想禁用或只读。我使用我网站上的按钮将文本附加到该文本区域以记笔记。不允许编辑的目的是为了防止任何人意外更改任何注释。

现在，如果有人确实需要更改他们已经提交的注释，我希望他/她能够编辑文本区域并重新锁定以进行编辑。

HTML：

<p><a id="append">Append</a> | <a id="lock">Lock</a> or <a id="unlock">Unlock</a></p>
<p><textarea id="notes" readonly="true" rows=10></textarea></p>

jQuery:

$("a#append").click(function() {
    $("textarea#notes").append("- This is a note.\n");
});
$("a#unlock").click(function() {
    $("textarea#notes").removeAttr("readonly");
});
$("a#lock").click(function() {
    $("textarea#notes").attr("readonly", "readonly");
});

http://jsfiddle.net/ljpaul/bakcwtaf/

问题：重新锁定 textarea 时（具有只读或禁用属性），当我单击附加另一个注释时，它不会显示。奇怪的是，它确实显示在 HTML 代码中，只是没有显示。有没有人有任何建议来解决这个问题/让它工作？我觉得我几乎尝试了所有属性组合和设置所述属性的方法！

编辑：用户将解锁该字段以对注释进行编辑或删除注释。因此，当解锁并对内容进行任何形式的编辑时，就会出现问题。

【问题讨论】：

有趣的是，只要用户在元素“解锁”时不进行“手动”编辑，它就可以正常工作（追加 -> 解锁 -> 追加 -> 锁定 -> 追加等）。
我忘了指定那部分。用户只会在发生错误或需要删除笔记时解锁文本区域以进行手动编辑。
我明白，正如问题所暗示的那样；但虽然我很感兴趣，但老实说，我不知道是什么原因造成的。
是的 - 这几天一直困扰着我！感谢您的观看！

标签： jquery append textarea readonly-attribute

【解决方案1】：

看起来只需要摆脱 .append() 函数。

$("textarea#notes").val($("textarea#notes").val() + "- This is a note.\n");

这可以解决问题并允许进行编辑。我认为这可能与附加目标 HTML 结构而不是编辑实际值有关。真的很奇怪。

【讨论】：