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

此代码有效，但只能工作一次。意思是：如果我添加一个超链接，它第一次起作用，但是当我想添加另一个链接时，它不会插入。取而代之的是，它只会更改我最初输入的内容以及我要添加到文本区域的其他纯文本。

我的问题：如何使该链接添加独立于我在文本区域（纯文本）中键入的内容，并确保我可以添加更多链接而不会更改文本区域中的其他链接？

提琴：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），以使每个链接显示在单独的行中，如下所示：

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

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

2 个答案: