JQuery如何点击html元素复制到文本区

JQuery how to click html element to copy into text area?

本文关键字：复制 文本区 元素 html 何点击 JQuery      更新时间：2023-09-26

是否可以单击列表中的文本添加到文本框中。我制作了一个JSONAPI，它可以获取数据库中的人员列表。然后我有一个表单，它有一个文本字段并显示人员列表。我想单击一个特定的人并将其添加到文本框中。

main.js

    var ajax_call = function() {
      var $people = $('#people');
      $.ajax({
          type: 'GET',
          url: '/all/api',
          success: function(people) {
            $.each(people, function(i, person) {
                $people.empty()
            });
            $.each(people, function(i, person) {
              $people.append('<li>name: ' + person.first_name+', last: '+ person.last_name + '</li>');
            });
          }
        });
      $("#people").on("click", "li", function() {
          var content = $(this).html();
         //$("#testbox").val(content);  //replace existing name in textbox
        $("#testbox").val($("#testbox").val() + content + "'n");  //add new name to textbox
});
    };
    var interval = 800;
    setInterval(ajax_call, interval);

form.html

<form id="textbox" action="" method="post">{% csrf_token %}
            {{ form.as_p }}
            <input type="submit" value="create" />
        </form>
    <ul id="people"></ul>

尝试这个附加到ul但被li过滤的"点击"函数（这允许列表保持动态），它允许您添加单个名称（两个版本，一个覆盖现有文本字段信息，另一个附加到它）：DEMO

$("#people").on("click", "li", function() {
    var content = $(this).html();
    //$("#testbox").val(content);  //replace existing name in textbox
    $("#testbox").val($("#testbox").val() + content + "'n");  //add new name to textbox
});

我认为你的问题的答案很简单。在你的代码中，你有一行

$("#people").keyup(function() {

这可能不是您想要做的，因为现在您正在等待列表上的keyup（密钥释放）事件。首先，你的问题表明，你希望用户点击而不是按下按钮；其次，你希望列表项目而不是列表本身。

所以IMO你必须把这个部分改成

$("li","#people").click(function(){
  var content = this.html();
  $("#testbox").val(content);
});

试试这个：

更换这个

$("#people").keyup(function() {
        var content = $('#people').html();
        $("#testbox").val(content);
    });

用这个

$("#people").click(function() {
        var content = $('#people').html();
        $("#testbox").val(content);
    });

如果我马上理解了你的问题，那么

$("#people").click(function(){
    var content = $('#people').html();
    $("#testbox").val(content);
});

应该做这项工作。但我认为你应该使用自定义属性之类的东西，而不是id，因为一个特定的标签只能有一个id。

相关文章：