使用 jQuery 将文本附加到 textarea 的末尾

Posted 2023-05-07

【中文标题】使用 jQuery 将文本附加到 textarea 的末尾

【英文标题】：Append text to the end of textarea using jQuery

【发布时间】：2016-08-04 15:49:14

【问题描述】：

我正在尝试使用 jquery 在文本区域的末尾附加文本。

我的 html 代码如下所示：

<textarea class='form-control' placeholder="Write something..." id="message" name="message" size='20'></textarea>
<fieldset class="form-group">
  <div class="checkbox">
    <label for="deptList">
      <label for="departments" id="deptList">Select a department
        <small>use this in case you've set up your account to <a
                                                href="#"> include a department</a> at the end
                                            of the text
                                        </small>
      </label>
      <input type="checkbox" value="" class="checkbox-inline" id="deptCheck">
      <select class="form-control" id="departments">
        <option>Dept. 1</option>
        <option>Dept. 2</option>
        <option>Dept. 3</option>
        <option>Dept. 4</option>
        <option>Dept. 5</option>
        <option>Dept. 6</option>
        <option>Dept. 7</option>
      </select>
    </label>
  </div>

</fieldset>

我附加文本的脚本是：

$('#deptCheck').click(function() 
    var theMessage = $("#message").text();
    var theDepartment = $("#departments").find(":selected").text();

    if ($(this).is(":checked")) 

        console.log(theMessage + theDepartment);
        $("#message").val(theMessage + theDepartment);
    else 
        alert('you have included department in your text, please remove it to avoid extra charges');
    
);

到目前为止： - 我可以将下拉选项的值添加到文本区域，但是当我添加它时，它会清除所有现有文本。

我想要实现的是用户在文本区域中键入一些文本，然后用户从文本区域下方的下拉列表中选择一个选项，然后将下拉列表的文本添加到键入文本的末尾在文本区域。我已经从网上的材料中尝试过，但我似乎没有做对。我哪里错了？

这是一个指向相同JS Fiddle的小提琴的链接

【问题讨论】：

Like this?

上一个答案：***.com/questions/7058864/add-text-to-textarea-jquery

【参考方案1】：

要在textarea 中获取text，您必须使用val() 函数： $("#message").val();

$('#deptCheck').click(function() 

  var theMessage = $("#message").val();
  var theDepartment = $("#departments").find(":selected").text();

  if ($(this).is(":checked")) 

    console.log(theMessage + theDepartment);
    $("#message").val(theMessage + theDepartment);
   else 
    alert('you have included department in your text, please remove it to avoid extra charges') //disable input
  
);

演示：https://jsfiddle.net/h2dp1oqu/8/

【讨论】：

这就是我需要的@Cristy 谢谢你的伙伴！

@falcon 没问题。如果您已经调试过代码，这是一个非常容易发现的错误。如果您在从textarea 获取文本后使用console.log(theMessage)，您会看到该值不正确。之后，您会发现问题来自 .text() 函数没有返回正确的值。如果你在 Google 上搜索“从 textarea jQuery 获取文本”，你会找到正确的函数，.val()。

另外，您可能想阅读这个答案：***.com/a/8854317/407650

我使用控制台进行调试，它显示了选项的文本，但文本区域没有显示任何内容。而且我确实尝试过使用 val() 但我想我在此过程中混淆了一些东西并卡住了。还是谢谢大家。

【参考方案2】：

将前两行替换为

var theMessage = $("#message").val();
var theDepartment = $("#departments").val();