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

ここで、私が問題を抱えている部分です。テキストエリアが空の場合は、最初から目的のテキストがテキストエリアに追加されます。これを複数回繰り返すと、テキストの各ブロックが最後のブロックの後に正常に追加されます。

ただし、ユーザーがボックスに何かを入力すると、空のテキスト領域に入力するか、目的のコード ブロックの 1 つを正常に追加した後で、ボタンが完全に無効になります。ページが更新されるまで、テキストエリアに何も追加されなくなります。

JQuery の .append メソッドを使用してテキストエリアとボタンに ID を指定した場合、まったく同じ結果が得られました。

誰でも助けることができますか？

4

2 に答える 2

5

innerHTMLテキストエリアの値を設定するために使用する正しいプロパティではありません。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 に答える