Javascript 在文本区域中键入后检测光标前的字符

Javascript 在文本区域中键入后检测光标前的字符,javascript,jquery,Javascript,Jquery,我正试图实现标记,就像facebook对@friendname所做的那样。我有一个文本区域,我想检测用户何时键入@。如何使用keyup侦听器实现这一点?是否可以使用keyup获取输入的文本?这是我现在拥有的 $("#recommendTextArea").keyup(function () { var content = $(this).val(); //content Box Data var go = content.match(start); //conte

我正试图实现标记,就像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
            }
        }
    });

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

要检测
@
,您可以执行以下操作:

$("#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;
    }
});

这只是一个快速的演示,构建一个始终有效并考虑到每一个可能结果的东西要比这个多得多

编辑:

最重要的是,我需要的是用户刚刚创建的“@”的索引 进来了

这将是
this.value.lastIndexOf('@')

再次编辑:

要在文本区域中键入名称,而不考虑光标位置、名称数量等。您必须使用正则表达式,这里有一个快速示例,可以键入所有和任何名称,只要它们以@开头,以空格结尾:

$("#recommendTextArea").keyup(function (e) {
    var names = this.value.match(/@(.*?)\s/g);
    $('#name').html('names typed : <br/><br/>' + names.join('<br/>'));
});
$(“#推荐文本区域”).keyup(函数(e){
var name=this.value.match(/@(.*)\s/g);
$('#name').html('键入的名称:

'+名称.join('
'); });
小提琴


我做了一些更改。

为什么需要“@”索引?你能提供一点JSFIDLE吗?可能的重复项有没有办法获取这个的索引?
this.value.lastIndexOf('@')
,这行不通。。如果我在末尾有一个@,并将光标移动到字符串的中间。。那么,这将失败case@adit-是的,得到正确结果的唯一方法是使用正则表达式并解析字符串以获得任何潜在的usenames,但您确实要求提供最后一个@的索引,这就是您得到的结果?@adit-再次编辑了答案,并添加了一个regex方法,该方法可以为您键入任何和所有名称。。如果你有两个呢?。你怎么知道哪一个是你刚才键入的。使用lastIndexOf()也不能解决这个问题。如果我将光标移动到字符串中间并键入@,但最后还有另一个@?你没有在问题中指定要获取的@索引。只键入了一个?是的,我想要用户刚刚输入的@的索引。。这就是全部
      (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 
    } 
});​