2

Facebookが@friendnameで行うのと同じように、タグ付けを実装しようとしています。テキストエリアがあり、ユーザーが @ を入力したときに検出したいと考えていました。キーアップリスナーを使用してこれを行うにはどうすればよいですか? キーアップを使用して入力したテキストを取得することは可能ですか? これが私が今持っているものです

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

を検出する@には、次のようにします。

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

フィドル

これは簡単なデモにすぎません。常に機能し、考えられるすべての結果に対応できるものを構築するには、これよりもはるかに多くの作業が必要になります。

編集：

最も重要なのは、ユーザーが入力した「@」のインデックスです。

それは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 に答える