使用Javascript添加到textarea中的现有文本

Question

我需要一个"添加功能"按钮,它将以下文本追加到textarea中已存在的文本:

<b>Features:</b>
<ul>
<li>Feature 1 here</li>
<li>Feature 2 here</li>
</ul>

它需要以html格式显示,以便用户可以看到标签及其内容.这是我正在使用的HTML:

<tr class="addItemFormDark">
    <td class="descriptionLabel">
        <p>Description:</p>
    </td>
    <td>
        <textarea name="description" id="addItemDescription" cols="77" rows="6"></textarea>
    </td>
</tr>
<tr class="addItemFormDark">
    <td colspan="2">
        <input type="button" onclick="addFeatures('addItemDescription')" value="Add Features"/>
    </td>
</tr>

...这是我正在使用的JavaScript:

function addFeatures(id) {
    var contents = document.getElementById(id).innerHTML;
    contents += "<b>Features:</b>\r<ul>\r\t<li>Feature 1 here</li>\r\t<li>Feature 2 here</li>\r</ul>";
    document.getElementById(id).innerHTML = contents;
}

现在这是我遇到麻烦的部分.如果textarea是空的,就像它一样,所需的文本将被添加到textarea中,并且这可以重复多次,每个文本块在最后一个之后成功添加.

但是,如果用户在框中键入任何内容,无论是在空文本区域中,还是在成功添加其中一个所需代码块之后,都会完全禁用该按钮.然后,在页面刷新之前,它将不再向textarea添加任何内容.

如果我使用JQuery的.append方法并给textarea和button一个id,我得到了完全相同的结果.

有人可以帮忙吗？

Answer 1

innerHTML不是用于设置textarea值的正确属性.请value改用.

function addFeatures(id) {
    var textarea = document.getElementById(id);
    textarea.value += "<b>Features:</b>\r<ul>\r\t<li>Feature 1 here</li>\r\t<li>Feature 2 here</li>\r</ul>";
}