detect character before the cursor after keyup in textarea

Question

I am trying to implement tagging just like what facebook does with @friendname. I have a textarea and I wanted to detect when a user typed in @. How do I do so using a keyup listener? Is it possible to get the entered text using keyup? Here's what I have now

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

Most importantly what I need is the index of the'@' that the user just entered.

Why do you need the '@' index? Can you provide a little jsfiddle? — MisterJ, May 15 '13 at 11:53
possible duplicate of [how can i get cursor position in a textarea?](http://stackoverflow.com/questions/1891444/how-can-i-get-cursor-position-in-a-textarea) — Danubian Sailor, May 15 '13 at 12:08

score 2 · Accepted Answer · edited May 23 '17 at 12:23

2

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 
    } 
});

I made some changes HERE.

edited May 23 '17 at 12:23

Community

1
1

answered May 15 '13 at 11:55

PSR

39,804
41
111
151

this doesn't solve it.. what if you have two @. How do you know which one is the one that you just typed. – adit May 15 '13 at 11:56
using lastIndexOf() also doesn't solve it. What if I move the cursor to the middle of the string and typed in @, but I also have another @ in the end? – adit May 15 '13 at 11:58
You did not specified that in the question – PSR May 15 '13 at 12:00
Which @ index you want to take.Just typed one ? – PSR May 15 '13 at 12:00
Yes I wanted the index of the @ that the user just inputted.. that's all – adit May 15 '13 at 12:03
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/29996/discussion-between-adit-and-psr) – adit May 15 '13 at 12:09

adeneo · Answer 2 · 2013-05-15T12:24:05.763

1

To detect a @, you'd do something like :

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

and this.value get's you whatever is typed into the textarea, and you'll need a regex to get what's between @ and the first following space, or something similar depending on how you intend to do this ?

To get a name, you can do something like this :

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 is just a quick demo, building something that always works and accounts for every possible outcome will be a lot more work than this.

EDIT:

Most importantly what I need is the index of the'@' that the user just entered.

that would be this.value.lastIndexOf('@')

EDIT AGAIN:

To get the names typed in the textarea regardless of cursor position, number of names etc. you'll have to use a regex, here's a quick example that gets all and any names typed in, as long as they start with a @, and ends with a blank space :

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

FIDDLE

edited May 15 '13 at 12:24

answered May 15 '13 at 11:53

adeneo

312,895
29
395
388

is there a way to get the index of this? – adit May 15 '13 at 11:54
`this.value.lastIndexOf('@')` – adeneo May 15 '13 at 11:57
that wouldn't work.. If I had an @ at the end and I moved the cursor to the middle of the string.. then this would failed the case – adit May 15 '13 at 12:08
@adit - yes it would, the only way to get proper results would be to use a regular expression and parse the string to get any potential usenames, but you did ask for the index of the last @, and that's what you got ? – adeneo May 15 '13 at 12:14
@adit - edited the answer again, and added a regex method that should get you any and all names typed in. – adeneo May 15 '13 at 12:24
You are awesome! Working perfect. – Rohit Saini Jun 04 '21 at 05:17

detect character before the cursor after keyup in textarea

2 Answers2