javascript - 通过分别单击标签将标签添加到文本区域

Question

我正在开发这个小型 Js 模块，其中有一个标签列表:

例如:用户名、电子邮件等

当我点击用户名时，它应该自动在文本区域中输入[用户名]。我已经尝试过并且工作正常。

这是Fiddle

现在的问题是，当我添加标签时，它总是添加在文本末尾。

看看这个字符串:嗨 [USERNAME]，这是您的 ['EMAIL']。

现在，如果我忘记选择 [用户名] 并且输入:嗨，这是您的 ['EMAIL']。

现在，如果我在“Hi”之后单击，然后选择用户名标签，它将在末尾添加标签，而不是在“Hi”之后添加标签

我该如何解决这个问题？

这是我的代码:

JS:

$('.tags').click(function (){
    var currentTag = $(this).attr("id");
    var currentTxt = $('#description').val();

    $('#description').val(currentTxt+currentTag);   
});

HTML:

<table width="300" border="0" cellspacing="8" cellpadding="0">
  <tr>
    <td>Tags: <a href="javascript:void(0);" class="tags" id="[USERNAME]">USERNAME</a> , <a href="javascript:void(0);" class="tags" id="[EMAIL]">EMAIL</a></td>
  </tr>
  <tr>
    <td>
    <textarea name="description" id="description" cols="45" rows="5"></textarea></td>
  </tr>
</table>

您也可以在这里查看我的DEMO:http://jsfiddle.net/kyfa2/1/

用非常简单的话来说:在文本区域中输入这句话:

              Hi , this is your Email

现在单击“嗨”后，然后单击“用户名标签”。

我想要这样的:

Hi [USERNAME] , this is your Email.

Answer 1

使用以下功能并更新我(如果有)!

  var $textBox;

 $(document).ready(function() {

        $('.tags').click(function (){
        var currentTag = ' ' +$(this).attr("id")+' ';
        var currentTxt = $('#description').val();
       insertText(currentTag);


    });    
        $textBox = $("#description");

        function saveSelection(){
            textBox.data("lastSelection", $textBox.getSelection());
        }

        $textBox.focusout(saveSelection);

        $textBox.bind("beforedeactivate", function() {
            saveSelection();
            $textBox.unbind("focusout");
        });
    });

    function insertText(text) {
        var selection = $textBox.data("lastSelection");
        $textBox.focus();
        $textBox.setSelection(selection.start, selection.end);
        $textBox.replaceSelectedText(text);
    }

演示: http://jsfiddle.net/rQXrJ/121/

来源及说明:Insert value into TEXTAREA where cursor was