обнаружить символ перед курсором после keyup в textarea

Question

Я пытаюсь реализовать тегирование так же, как то, что делает facebook с @friendname. У меня есть textarea, и я хотел бы определить, когда пользователь набрал @. Как это сделать с помощью прослушивателя клавиш? Можно ли получить введенный текст с помощью клавиатуры? Вот что у меня сейчас

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

Это просто быстрый демо, построить что-то, что всегда работает и счетов для каждого из возможных исходов будет много больше работы, чем это.

EDIT:

Самое главное, что мне нужно, это индекс символа «@», что пользователь просто вошел.

что бы this.value.lastIndexOf('@')

EDIT СНОВА:

Чтобы получить имена, набранные в текстовое поле, независимо от позиции курсора, количество имен и т.д., вам придется использовать регулярное выражение, вот быстрый пример, который получает все и любые имена, набранные, до тех пор, как они начинаются с @, и заканчивается пробелом:

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

FIDDLE