通过点击标签添加标签，以多行文本分别

Question

我对这个小的js模块的工作中，我有标签的列表：

例如：用户名，电子邮件等

当我点击用户名它应该在textarea中自动输入[USERNAME]。我已经尝试过，工作正常。

这里是Fiddle

现在的问题是，当我添加标签，它总是在添加文本的结束。

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

现在，如果我忘记选择[USERNAME]，然后输入：嗨，这是您的['EMAIL']。

所以，现在，如果我以后喜单击，然后我选择用户名标签，它会在末尾添加标签，而不是之后加入它的“喜”

如何解决这个事情？

这里是我的代码：

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); 
    } 

demo:http://jsfiddle.net/rQXrJ/121/

来源&说明：Insert value into TEXTAREA where cursor was