如何在不替换文本框上的文本的情况下传递 <li>文本答案

【问题标题】：How to pass <li>text without replace the text on textbox如何在不替换文本框上的文本的情况下传递 <li>文本
【发布时间】：2017-05-07 01:28:08
【问题描述】：

我今天有学校作业。我已经可以将表情符号传递给文本框，但如果单击，它将替换文本框上的先前表情符号或文本。如果我单击并能够保留输入的表情符号或文本，我想知道如何不替换文本框文本。如果你们不懂，对不起我的英语不好。

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

【问题讨论】：

使用$("#ToSend").val($("#ToSend").val()+$(this).text())
当您使用 .val(value) 时，它会用新值替换旧值，您只需 store 旧值并 concat 用新值

标签： javascript c# jquery html

【解决方案1】：

要添加到现有值，您需要附加到input 中的val()，而不是每次都替换它。为此，您可以将一个函数传递给为您处理附加的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>

另外请注意，我将.btnemoji 的$("ul.emoji li").click() 处理程序移出，因为每次切换ul 时，您都在重复添加新的事件处理程序。

【讨论】：

【解决方案2】：

这是最短的方法。你只需要使用这个：

$("#ToSend").val($("#ToSend").val()+$(this).text());

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

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

【讨论】：

切换菜单几次，然后单击li 之一。你会看到你点击的表情被添加了N次

【解决方案3】：

$("#ToSend").append($(this).text());

不使用用户追加功能

【讨论】：

Downvote 不是我的，但这行不通。你不能 append() 到 value 元素的 value 属性