如何通过提示向文本区域添加多个值而不删除和更改其他文本？

Question

我创造了这个小提琴，让你可以看到我的挣扎。

我的 HTML

<form action="" method="post" role="form" name="my-form-name">

<button class="html-button">Link me</button>

<textarea name="x" id="post-text" rows="17" required="required"></textarea>

<button type="submit" class="submit-button-form">submit form</button>

</form>

JS：

$(".html-button").on("click", function () {
    var urls = prompt("Add a link", "http://");
    var setText = $("#post-text").val(urls);
// Adding prompt text into my input field
    $("#post-text").val(urls);
                            });

此代码有效，但仅有效一次。含义：如果我添加一个超链接，它第一次可以工作，但是当我想添加 another 链接时，它不会插入它。相反，它只是改变了我首先输入的内容 + 我添加到 textarea 的附加纯文本。

我的问题：我怎样才能使这个链接添加独立于我在 textarea 中输入的内容（纯文本），并确保我可以添加更多链接而不改变 textarea 中的其他链接?

小提琴：https://jsfiddle.net/vaxqsztj/1/

Answer 1

你需要追加数据而不是替换

$("#post-text").val(urls);   <-- here you're replacing data with url only

相反，您需要在 url 中添加以前的文本

var setText = $("#post-text").val(urls);
$("#post-text").val(setText + urls);   <-- adding url along with previous value

$(".html-button").on("click", function() {
  var urls = prompt("Add a link", "http://");
  var setText = $("#post-text").val();
  // Adding prompt text into my input field
  $("#post-text").val(setText + urls);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" role="form" name="my-form-name">
  <button class="html-button" type='button'>Link me</button>
  <textarea name="x" id="post-text" rows="17" required="required"></textarea>
  <button type="submit" class="submit-button-form">submit form</button>
</form>

Answer 2

问题是您正在使用当前提示值重置以下行中 textarea 的值：

var setText = $("#post-text").val(urls);

您可以使用 jQuery 的 .append() 在 textarea 中插入内容。

您可以删除它并在每次点击时添加换行符 (\n) 以将每个链接显示在单独的行中，如下所示：

$(".html-button").on("click", function () {
  var urls = prompt("Add a link", "http://");
  $("#post-text").append(urls + '\n');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="html-button">Link me</button>

<textarea name="x" id="post-text" rows="17" required="required"></textarea>