Question

我正在尝试实现标记，就像facebook对@friendname的做法一样。我有一个textarea，我想检测用户输入@的时间。如何使用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
            }
        }
    });

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

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得到你在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;
    }
});

FIDDLE

这只是一个快速演示，构建一些始终有效并且考虑到每个可能结果的东西将会比这更多的工作。

修改

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

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

再次编辑：

要获得在textarea中输入的名称，无论光标位置，名称数量等等，您都必须使用正则表达式，这里有一个快速示例，可以输入所有名称和任何名称，只要它们以@，并以空格结束：

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

<强> FIDDLE

在textarea中的keyup之后检测光标前的字符

2 个答案: