使用按钮在textarea中输入文本，希望每个条目在新行上开始

Question

我有一个我为工作目的创建的简单网页。它有多个按钮，可将文本输入文本区域。我希望每个输入都以新的一行开始。我已经尝试在我能想到的每个地方输入/ r / n但似乎无法让它工作。似乎无法在任何其他帖子中找到确切的答案。以下是代码的相关部分。

function insertText(val,e){
    document.getElementById(e).innerHTML+=val;
}

<a href="javascript:insertText('Application submitted by applicant - Demande          Presentee par requerant \n','textarea');" onClick="void(0)">[sub by appl]</a>
<a href="javascript:insertText('Application submitted by a third party - Demande presentee par une tierce partie : ','textarea');" onClick="void(0)">[sub by 3rd party]</a>

<form name="textform">
    <font face="Arial, Helvetica, sans-serif" size="2"> 
        <textarea name="textarea" cols="100" rows="15">
        </textarea>
    </font> 
</form>

Answer 1

您将元素ID传递给getElementById如果您想要选择textarea，那么就没有ID为textarea的元素<textarea id="textarea" name="textarea" cols="100" rows="15">

Answer 2

1）您不需要使用 innerHTML 属性来设置textarea的值，而是使用其值属性。

2）更好的做法是将 href 属性与“＃”值一起使用，并在 onclick 设置事件处理程序中返回 false

3）数据 - * 属性非常有用。您可以使用以下方法有效地将任何信息存储在标记中：

<div id="person-27" data-name="Linus" data-surname="Torvalds">Linux creator</div>

...稍后会检索此信息，如下面的示例所示。

4）使用 \ n 插入新行。

所以你的代码看起来像：

<a class="text-btn" href="#"
    data-text="Application submitted by applicant - Demande Presentee par requerant">
    [sub by appl]
</a>

<a class="text-btn" href="#"
    data-text="Application submitted by a third party - Demande presentee par une tierce partie">
    [sub by 3rd party]
</a>

<form name="textform" id="textform">
    <font face="Arial, Helvetica, sans-serif" size="2"> 
        <textarea name="textarea" cols="100" rows="15"></textarea>
    </font> 
</form>

<script type="text/javascript">
    (function() {
        var form = document.getElementById('textform'),
            textarea = form['textarea'],
            anchors = document.getElementsByTagName('a');
        function insertText() {
            textarea.value += this.getAttribute('data-text') + "\n";
            return false;
        }
        for(var i = 0, l = anchors.length; i < l; i++) {
            if(anchors[i].className == 'text-btn') {
                anchors[i].onclick = insertText;
            }
        }
    })();
</script>​

DEMO