js perfectly realizes the @mention of friends special effect (compatible with all major browsers)

js perfectly realizes the @mention of friends special effect (compatible with all major browsers)_javascript skills

WBOY

Release： 2016-05-16 16:09:23

Original

1521 people have browsed it

Requirements

1. When entering @, the matching friends menu will pop up

2. When the cursor enters a tag containing "@friend", a pop-up menu

3. When pressing backspace to delete, if there is a tag containing "@Friend" in front of the cursor, a pop-up menu

4. Compatible with IE, firefox.

Specific methods

For requirement one, it is natural to think of binding events to the input box. Here we need to bind mousedown, not mouseup. Because if it is mouseup, event.preventDefault() cannot prevent the keyboard from inputting @. In addition, using return false in the event callback will not work.

After binding the mousedown event, you need to insert a custom tag containing "@friend". The input box of Sina Weibo is made of textarea. It is impossible to know how it is processed internally. We have to look at Baidu Tieba.

As you can see, the Tieba has inserted the tag. This should be convenient for background matching with regular expressions.

Specific

Copy code The code is as follows:

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

            }

        };

Here we need to insert at the cursor, so we use range.

Then the menu is displayed, the key is how to position it. My approach is very rubbish, which is to add an id to the inserted span, and then position the menu based on the position of the span id. If there is a better way, please let me know.

Specific

Copy code The code is as follows:

    function 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删除。

复制代码代码如下:

    function getTextBeforeCursor(containerEl) {

        var precedingChar = "", sel, range, precedingRange;

        if (window.getSelection) {

            sel = window.getSelection();

            if (sel.rangeCount > 0) {

                range = sel.getRangeAt(0).cloneRange();

                range.collapse(true);

                range.setStart(containerEl, 0);

                precedingChar = range.cloneContents();

            }

        } else if ( (sel = document.selection)) {

            range = sel.createRange();

            precedingRange = range.duplicate();

            precedingRange.moveToElementText(containerEl);

            precedingRange.setEndPoint("EndToStart", range);

            precedingChar = precedingRange.htmlText;

        }

        return precedingChar;

    }

getTextBeforeCursor的作用是获取光标前的内容.由于兼容性，这个函数在标准浏览器中可以得到是光标前所有内容的DocumentFragment，而在ie中就只能得到文本(不是node)了，不过这个html字符串可以转换成DocumentFragment.在avalon中用parseHTML就可以将html字符串变成node了。jquery中用$(html)[0]也能得到node.

有了这个函数，再用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);

                }else

                    $('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;

               }else{

              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';

        };

Note that if the cursor is in span, its id must be taken out, the at_box is positioned based on this id, and cur_index must be reset.

As for the ajax update menu, I won’t do character matching

Effect

firefox