1

我需要有一个“添加功能”按钮，它将以下文本附加到文本区域中已经存在的文本中：

<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，我会得到完全相同的结果。

任何人都可以帮忙吗？

4

2 回答 2

5

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>";
}
于 2012-10-01T13:03:20.283 回答
2

使用 jquery 我会使用这个：

var appendData = //the HTML text you want to add
var currentData = $("#textboxID").val();
var newData = currentData+appendData;

$("#textboxIS").val(newData);
于 2012-10-01T13:11:15.210 回答