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

Question

我创建了这个 fiddle ，以便您可以看到我所经历的斗争。

我的 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);
                            });

此代码可以工作，但只能工作一次。含义:如果我添加一个超链接，它第一次会起作用，但是当我想添加另一个链接时，它不会插入它。相反，它只是更改我首先输入的内容以及我添加到文本区域的附加纯文本。

我的问题:如何使此链接添加独立于我在文本区域(纯文本)中输入的内容，并确保我可以添加更多链接而不更改文本区域中的其他链接？

fiddle :https://jsfiddle.net/vaxqsztj/1/

Answer 1

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

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

相反，您需要添加之前的文本和网址

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>