在 textarea 中键入后检测光标前的字符

Question

我正在尝试实现标记，就像 facebook 对 @friendname 所做的那样。我有一个文本区域，我想检测用户何时输入@。如何使用 keyup 侦听器来做到这一点？是否可以使用 keyup 获取输入的文本？这是我现在所拥有的

$("#recommendTextArea").keyup(function () {
        var content = $(this).val(); //content Box Data
        var go = content.match(start); //content Matching @
        var name = content.match(word); //content Matching @friendname

        console.log(content[content.length-1]);
        //If @ available
        if(go.length > 0)
        {
            //if @abc avalable
            if(name.length > 0)
            {
               //do something here
            }
        }
    });

最重要的是我需要的是用户刚刚输入的'@'的索引。

Answer 1

LINK

      (function ($, undefined) {
    $.fn.getCursorPosition = function() {
        var el = $(this).get(0);
        var pos = 0;
        if('selectionStart' in el) {
            pos = el.selectionStart;
        } else if('selection' in document) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        }
        return pos;
    }
})(jQuery);

$("#recommendTextArea").on('keypress', function(e){
    var key = String.fromCharCode(e.which);
    if(key === '*') {
        var position = $(this).getCursorPosition();
        alert(position); // It is the position
        alert($(this).val()); // This is the value 
    } 
});​

我做了一些更改HERE。

Answer 2

要检测@，您可以执行以下操作：

$("#recommendTextArea").keyup(function (e) {
    if (e.which===50) {
        alert('you typed @');
    }
});

而this.value 会得到你在文本区域中输入的任何内容，你需要一个正则表达式来获取@ 和后面的第一个空格之间的内容，或者类似的内容，具体取决于你打算如何执行此操作？

要获得名称，您可以执行以下操作：

var _name = false;

$("#recommendTextArea").keyup(function (e) {
    if (_name) {
        $('#name').text('name : ' + this.value.substring( this.value.lastIndexOf('@') ) )
    }
    if (e.which === 50) {
        _name = true;
    }
    if (e.which === 32) {
        _name = false;
    }
});

FIDDLE

这只是一个快速演示，构建始终有效并考虑所有可能结果的东西将比这多得多。

编辑：

最重要的是我需要的是用户刚刚的'@'的索引 输入。

那就是this.value.lastIndexOf('@')

再次编辑：

要获取在文本区域中键入的名称，无论光标位置、名称数量等如何。您必须使用正则表达式，这里有一个快速示例，可以获取输入的所有名称和任何名称，只要它们以 a 开头@，并以空格结尾：

$("#recommendTextArea").keyup(function (e) {
    var names = this.value.match(/@(.*?)\s/g);
    $('#name').html('names typed : <br/><br/>' + names.join('<br/>'));
});

小提琴