单击链接时，使用文本填充文本区域

Question

我有两个HTML文本区域，id = textarea1，id = textarea2，列表如下

• 橙色
• 苹果

当我专注于textarea1并单击Orange时，文本应填充在textarea1中。当焦点在textarea2上并单击文本时，文本应填充在textarea2中。

＆＃13;

＆＃13;

<div id=fruits>
  <table>

    <tr>
      <td>
        <ul>
          <li>
            orange
            <li>
              apple
            </li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <textarea id="textarea1" style="width: 99%; height: 100px;"></textarea>
        <textarea id="textarea2" style="width: 99%; height: 100px;"></textarea>
      


      </td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用全局变量来记住您关注的textarea。然后，当您单击其中一个项目时，将其复制到textarea。

var textarea;
$("textarea").focus(function() {
  textarea = $(this);
});

$("li").click(function() {
  if (textarea) {
    var text = $(this).text().trim();
    textarea.val(function(i, oldval) {
        if (oldval.length) {
            return oldval + '\n' + text;
        } else {
            return text;
        }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id=fruits>
  <table>
    <tr>
      <td>
        <ul>
          <li>
            orange
            <li>
              apple
            </li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <textarea id="textarea1" style="width: 99%; height: 100px;"></textarea>
        <textarea id="textarea2" style="width: 99%; height: 100px;"></textarea>
      </td>
    </tr>
  </table>
</div>