如何传递<li>文本而不替换文本框上的文本

Question

我今天得到了学校作业.我可以将表情符号传递给文本框但如果单击它将替换文本框中的先前表情符号或文本.如果我点击并能够保留输入表情符号或文本,我想知道如何不替换文本框文本.如果你们不明白,对不起我的英语不好.

$(document).ready(function () {
    $("ul").hide();
    $("input.btnemoji").click(function () {
        $("ul").toggle();
        $("ul.emoji li").click(function () {
            $("#ToSend").val($(this).text());
        });
    });
});

<asp:Textbox id="ToSend" runat="server" Width="300px"></asp:Textbox>
<input type="button" class="btnemoji" value="&#x1F600;" />
<ul class="emoji">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Answer 1

要添加到现有值,您需要附加到现有值val(),input而不是每次都替换它.为此,您可以将函数传递给val()处理附加的方法,如下所示:

$(document).ready(function() {
  $("ul").hide();

  $("input.btnemoji").click(function() {
    $("ul").toggle();
  });

  $("ul.emoji li").click(function() {
    var $li = $(this);
    $("#ToSend").val(function(i, v) {
      return v + $li.text();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ToSend" width="300px">
<input type="button" class="btnemoji" value="&#x1F600;" />
<ul class="emoji">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

另请注意,我将$("ul.emoji li").click()处理程序移到了一个处理程序之外,.btnemoji因为每次ul切换时都会重复添加新的事件处理程序.