I'd like to start an action (enabling autoplete) when user types '@'. I have jQuery available.

Usually on a QWERTY keyboard, it is like this:

$('textarea').live('keydown', function(e) {
  if (e.which === 50) {
    console.log('@ has been entered.');
  }
});

However it does not work correctly on an AZERTY keyboard. The keyCode = 50 corresponds to the é~/2 key. To type '@' in AZERTY keyboard, it is AltGr + à@/0 key.

Edit: Autoplete starts when @ is entered, and only after that. Example, when someone enters "Hello @" then it starts, however when he types "Hello @nothing else" the plete won't do anything. Example: / (it works only on QWERTY keyboard).

I'd like to start an action (enabling autoplete) when user types '@'. I have jQuery available.

Usually on a QWERTY keyboard, it is like this:

$('textarea').live('keydown', function(e) {
  if (e.which === 50) {
    console.log('@ has been entered.');
  }
});

However it does not work correctly on an AZERTY keyboard. The keyCode = 50 corresponds to the é~/2 key. To type '@' in AZERTY keyboard, it is AltGr + à@/0 key.

Edit: Autoplete starts when @ is entered, and only after that. Example, when someone enters "Hello @" then it starts, however when he types "Hello @nothing else" the plete won't do anything. Example: http://mrkipling.github./jQuery-at-username/ (it works only on QWERTY keyboard).

• javascript
• jquery
• events
• keyboard
• multilingual

• D'oh, I didn't notice what StackOverlow have exactly what I need with the username autoplete feature in the ment. – jcisio Commented Aug 26, 2012 at 22:22

5 Answers 5

Use keypress instead of keydown. While keydown relates to every press of a key, keypress relates to the translated characters, so for example a can be different to a while the shift key is pressed, posed characters work, dead-keys work, and other differences in keyboard mappings are handled.

How about checking if @ was entered as the last character in the field value?

$("body").on("keyup", "textarea", function(e) {
    if (this.value.indexOf("@") == this.value.length - 1) {
        console.log("Starting autoplete");
    }
});​

DEMO: http://jsfiddle/FKhPW/2/

Use event.key and modern JS, checking for @ directly!

No number codes anymore. You can check key directly.

const input = document.getElementById("textarea");
input.addEventListener("keydown", function (event) {
    if (event.key === "@") {
        // Do something
    }
});

Mozilla Docs

Supported Browsers

The only other option that es to mind would be a timer that checks the content of the text input.

var patt=new RegExp(/^@/);
var charCheck = setInterval(function(){
  if (patt.test($("#textInput").val())){
    // initiate autoplete
  }
},100);

This code will inspect the contents of the #textInput element and see if it matches the regular expression of a @ symbol at the beginning of the string. If it does, the test() function will evaluate to true and you can initiate your autoplete code.

Here you go working demo: http://jsfiddle/LxpQQ/

From my old reply here:

jquery autoplete using '@'

Hope it will fit you cause :)

code

source: function(request, response) {
            if (request.term.indexOf("@") >= 0) {
                $("#loading").show();
                getTags(extractLast(request.term), function(data) {
                    response($.map(data.tags, function(el) {
                        return {
                            value: el.name,
                            count: el.count
                        }
                    }));
                    $("#loading").hide();                    
                });
            }
        },