1

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

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

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

这是小提琴

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

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

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

所以现在如果我点击 Hi 然后我选择Username Tag，它将在末尾添加标签而不是在“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/

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

              Hi , this is your Email

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

我想要这样：

Hi [USERNAME] , this is your Email.
4

1 回答 1

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/

来源和解释：将值插入光标所在的 TEXTAREA

于 2013-10-28T18:06:46.130 回答