js realisiert perfekt den @mention of friends-Spezialeffekt (kompatibel mit allen gängigen Browsern)_Javascript-Fähigkeiten

Anforderungen

1. Wenn Sie @ eingeben, wird das passende Freundesmenü angezeigt

2. Wenn der Cursor ein Tag mit „@friend“ betritt, erscheint ein Popup-Menü

3. Wenn Sie zum Löschen die Rücktaste drücken und sich vor dem Cursor ein Tag befindet, das „@Friend“ enthält, wird ein Popup-Menü

angezeigt

4. Kompatibel mit IE, Firefox.

Spezifische Methoden

Für Anforderung eins ist es selbstverständlich, Ereignisse an das Eingabefeld zu binden. Hier müssen wir Mousedown binden, nicht Mouseup, denn wenn es Mouseup ist, kann event.preventDefault() die Tastatur nicht daran hindern, @ einzugeben. Darüber hinaus funktioniert die Verwendung von „return false“ im Ereignisrückruf nicht.

Nachdem Sie das Mousedown-Ereignis gebunden haben, müssen Sie ein benutzerdefiniertes Tag mit „@friend“ einfügen. Das Eingabefeld von Sina Weibo besteht aus einem Textbereich. Es ist unmöglich zu wissen, wie es intern verarbeitet wird. Wir müssen uns Baidu Tieba ansehen.

Wie Sie sehen können, hat der Tieba das Tag eingefügt. Dies sollte für den Hintergrundabgleich mit regulären Ausdrücken praktisch sein.

Spezifisch

Code kopieren Der Code lautet wie folgt:

         vm.check_key=function(e){
          var editor=$('editor'),range;
If(e.shiftKey&&e.keyCode==50){
If (document.selection && document.selection.createRange) {
                       range = document.selection.createRange();
                   range.pasteHTML(" @ ");
                     }else{
                  document.execCommand("insertHtml", false," @ ");
                }
                   e.preventDefault();
            }
        };

Hier müssen wir am Cursor einfügen, also verwenden wir den Bereich.

Dann wird das Menü angezeigt. Der Schlüssel liegt in der Positionierung. Mein Ansatz ist sehr sinnlos, nämlich dem eingefügten Bereich eine ID hinzuzufügen und dann das Menü basierend auf der Position der Bereichs-ID zu positionieren. Wenn es einen besseren Weg gibt, lassen Sie es mich bitte wissen.

Spezifisch

Code kopieren Der Code lautet wie folgt:

    Funktion at_box_show(at){
        var at_pos=avalon($(at)).position();
        $('at_box').style.left=at_pos.left 'px';
        $('at_box').style.top=at_pos.top 16 'px';
        $('at_box').style.display='block';
    }
    var at_index=0,cur_index=0;
    avalon.define('editor', function(vm) {
        vm.item_click=function(){
            $('at' cur_index).innerHTML="@" this.innerHTML;
            $('at_box').style.display='none';
            at_index ;
        };
        vm.check_key=function(e){
            var editor=$('editor'),a=getCharacterPrecedingCaret(editor),range;
            if(e.shiftKey&&e.keyCode==50){
                if (document.selection && document.selection.createRange) {
                    range = document.selection.createRange();
                    range.pasteHTML(" @ ");
                }else{
                    document.execCommand("insertHtml", false," @ ");
                }
                at_box_show('at' at_index);
                cur_index=at_index;
                e.preventDefault();
            }
        };
    });

at_show_box根据新插入的span id, 为at_box定位,然后显示菜单.cur_index表示光标当前所在的span id.设置这个变量因为用户可能倒回去改已经插入的span,而at_index是一直递增的，所以这里就还需要一个变量.

用户点击菜单中好友项，触发item_click回调。回调里就是将好友名字用innserHTML添加到当前span里面.然后隐藏菜单，at_index 。

上面是监听shift @,接着是监听backspace删除.

复制代码 代码如下:

    Funktion getTextBeforeCursor(containerEl) {
        var previousChar = "", sel, range, previousRange;
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.rangeCount > 0) {
                range = sel.getRangeAt(0).cloneRange();
                range.collapse(true);
                range.setStart(containerEl, 0);
                previousChar = range.cloneContents();
            }
        } else if ( (sel = document.selection)) {
            range = sel.createRange();
            previousRange = range.duplicate();
            previousRange.moveToElementText(containerEl);
            previousRange.setEndPoint("EndToStart", range);
            previousChar = previousRange.htmlText;
        }
        return previousChar;
    }

getTextBeforeCursor的作用是获取光标前的内容标前所有内容的DocumentFragment，而在ie中就只能得到文文本(不是node)了，不过Verwenden Sie die Datei „documentfragment“. 🎜>

有了这个函数，再用lastChild就可以判断光标是不是在光标前html的lastChild里，并且这个lastChild是span。

具体的

复制代码 代码如下:

               var a=getTextBeforeCursor($('editor'));
                       if(e.keyCode==8){
                if(!-[1,]){
                    var b=avalon.parseHTML(a).lastChild;
                }else{
                    var b=a.lastChild;
                }
                if(b.nodeType==1&&b.nodeName=='SPAN'){
                    var id=b.id;
                    cur_index=b.id.substring(2);
                    at_box_show(b.id);
                }sonst
                    $('at_box').style.display='none';
            }

最后是光标进入span标签,显示菜单.这个很显然需要绑定鼠标事件。这里绑定mouseup,因为如果绑定Mousedown的话,需要鼠标在span标签再点一次才能显示菜单.至于原理，和上面差不多.

复制代码 代码如下:

         vm.check_mouse=function(e){
          var editor=$('editor'),a=getTextBeforeCursor(editor);
                if(!-[1,]){
              var b=avalon.parseHTML(getTextBeforeCursor(editor)).lastChild;
               }sonst{
              var b=a.lastChild;
            }
If(b!=null&&b.nodeType==1&&b.nodeName=='SPAN'){
              var id=b.id;
                                                                                                                                 cur_index=b.id.substring(2);
                     at_box_show(b.id);
               }else
                       $('at_box').style.display='none';
        };

Beachten Sie, dass, wenn sich der Cursor in span befindet, seine ID entfernt werden muss, die at_box basierend auf dieser ID positioniert wird und cur_index zurückgesetzt werden muss.

Was das Ajax-Update-Menü betrifft, werde ich keinen Zeichenvergleich durchführen

Wirkung

Firefox

ie8

ie7

ie6

Herunterladen

Das Obige ist der gesamte in diesem Artikel beschriebene Inhalt. Ich hoffe, dass er für alle hilfreich ist, um Javascript zu verstehen.