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

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

此代码有效，但只有效一次。意思是：如果我添加一个 hyperlink 它第一次工作，但是当我想添加 another link 时，它不会插入它。相反，它只是改变了我首先输入的内容 + 我添加到文本区域的附加纯文本。

我的问题： 我怎样才能使这个 link 添加独立于我在文本区域（纯文本）中键入的内容并确保我可以添加更多 links 没有改变文本区域中的其他内容？

Fiddle: 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() 在文本区域中插入内容。

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

$(".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>

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

How to add multiple values via prompt to textarea without removing and changing other texts?

javascript

jquery

html

prompt