2

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

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

4

2 回答 2

2

关联 

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

我在这里做了一些改变。

于 2013-05-15T11:55:15.700 回答
1

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

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

并this.value得到你在textarea中输入的任何内容，你需要一个正则表达式来获取@和第一个空格之间的内容，或者类似的东西，具体取决于你打算如何做到这一点？

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

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

小提琴

于 2013-05-15T11:53:49.393 回答