Question

我正在研究小Js模块，其中我有一个标签列表：

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

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

以下是Fiddle

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

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

现在，如果我忘记选择[USERNAME]并输入：您好，这是您的['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>

您还可以在此处查看我的演示：http://jsfiddle.net/kyfa2/1/

用非常简单的话说：在textarea中输入这句话：

              Hi , this is your Email

现在点击Hi后点击，然后点击用户名标签。

我想这样：

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/

来源＆amp;说明：Insert value into TEXTAREA where cursor was

通过分别单击标签将标签添加到Textarea

1 个答案: