使用jQuery在textarea中附加元素ID

Question

单击li项目时，我想在文本区域中插入其ID。我有以下代码，只有在textarea中没有输入任何内容时它才能正常工作。如果我在textarea中输入任何内容（即使我将其删除），它也无法正常工作。我该如何解决这个问题？

检查演示以查看问题。

$("ul li").click(function(event) {
    var eid = $(this).attr('id');
    $(".text").append(eid);
});

的jsfiddle： http://jsfiddle.net/2nt7vkwe/

Answer 1

您不需要使用附加功能。您可以使用val()：

＆＃13;

＆＃13;

$("ul li").click(function(event) {
  var eid = $(this).attr('id');
  $(".text").val($(".text").val() + " " + eid);
});

＆＃13;

textarea {
  height: 100px;
  width: 300px;
  margin-bottom: 20px;
}
ul li {
  float: left;
  margin-right: 5px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  cursor: pointer;
}
ul li img {
  max-width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="text">

</textarea>

<div class="list">
  <ul>
    <li id="what">
      <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/72_EmoticonsHDcom.png" />
    </li>
    <li id="wasntme">
      <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/40_EmoticonsHDcom.png" />
    </li>
    <li id="rockstar">
      <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/26_EmoticonsHDcom.png" />
    </li>

    <li id="angry">
      <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/70_EmoticonsHDcom.png" />
    </li>

  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

检查出来：

$("ul li").click(function(event) {
  var eid = $(this).attr('id');
  var texto = $(".text").val();
  $(".text").val(texto + eid);
});

工作小提琴：http://jsfiddle.net/robertrozas/2nt7vkwe/6/

Answer 3

如果您的元素带有＆＃34; text＆＃34;是一个textarea元素尝试：

$("ul li").click(function(event) {
    var eid = $(this).attr('id');
    var oldVal = $(".text").val();
    $(".text").val(oldVal + eid);
});

请注意，如果您有多个textarea，则需要调整此代码以处理倍数。

Answer 4

这应该做的工作：

http://jsfiddle.net/2nt7vkwe/7/

$("ul li").click(function(event) {
    event.preventDefault();
    var eid = $(this).attr('id');
     $(".text").val(eid);
    // $(".text").append(eid);
});