js는 친구의 @멘션 특수 효과를 완벽하게 구현합니다(모든 주요 브라우저와 호환 가능)_javascript 기술

요구사항

1. @를 입력하면 매칭 친구 메뉴가 뜹니다

2. "@friend"가 포함된 태그에 커서를 넣으면 팝업 메뉴가 나타납니다

3. 백스페이스를 눌러 삭제하면 커서 앞에 "@Friend"가 포함된 태그가 있으면 팝업 메뉴가 나타납니다

4. IE, 파이어폭스와 호환됩니다.

구체적인 방법

요구사항 1번에서는 이벤트를 입력 상자에 바인딩하는 것을 생각하는 것이 당연합니다. 여기서는 mouseup이 아닌 mousedown을 바인딩해야 합니다. 왜냐하면 mouseup인 경우 event.preventDefault()는 키보드가 @를 입력하는 것을 막을 수 없기 때문입니다. 또한 이벤트 콜백에서 return false를 사용하면 작동하지 않습니다.

mousedown 이벤트를 바인딩한 후 "@friend"가 포함된 맞춤 태그를 삽입해야 합니다. Sina Weibo의 입력란은 내부적으로 어떻게 처리되는지 알 수 없습니다.

보시다시피 Tieba에는 태그가 삽입되어 있습니다. 이는 정규식과의 배경 일치에 편리합니다.

구체적

코드 복사 코드는 다음과 같습니다.

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

여기서는 커서 위치에 삽입해야 하므로 범위를 사용합니다.

그러면 메뉴가 표시됩니다. 핵심은 메뉴 위치를 지정하는 방법입니다. 내 접근 방식은 매우 쓰레기입니다. 즉, 삽입된 범위에 ID를 추가한 다음 해당 범위 ID의 위치에 따라 메뉴 위치를 지정하는 것입니다. 더 좋은 방법이 있으면 알려주시기 바랍니다.

구체적

코드 복사 코드는 다음과 같습니다.

    함수 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='차단';
    }
    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) {
                    범위 = document.selection.createRange();
                    range.pasteHTML(" @ ");
                }그밖에{
                    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是一直递增的，所以这里就还需要一个变weight。

사용户点击菜单中好友项，触发item_click回调。回调里就是将好友name字으로는innserHTML添加到当前span里face.然后隐藏菜单，at_index 。

상면是监听shift @,接着是监听backspace删除。

复主代码 代码如下:

    함수 getTextBeforeCursor(containerEl) {
        var 선행Char = "", sel, 범위, 선행Range;
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.rangeCount > 0) {
                범위 = sel.getRangeAt(0).cloneRange();
                range.collapse(true);
                range.setStart(containerEl, 0);
                PreviousChar = range.cloneContents();
            }
        } else if ( (sel = document.selection)) {
            범위 = sel.createRange();
            PreviousRange = range.duplicate();
            PreviousRange.moveToElementText(containerEl);
            PreviousRange.setEndPoint("EndToStart", range);
            선행Char = 선행Range.htmlText;
        }
        이전 문자 반환
    }

getTextBeforeCursor가 사용하는 작업은 다음과 같습니다.在ie中就只能得到文本(不是node)了，不过这个html字符串可以转换成DocumentFragment.재avalon중용parseHTML就可以将html字符串变成node了。jquery中용$(html)[0]也能得到node.

여기에는 lastChild가 있습니다.

좋은 체형

复主代码 代码如下:

               var a=getTextBeforeCursor($('editor'));
                       if(e.keyCode==8){
                if(!-[1,]){
                    var b=avalon.parseHTML(a).lastChild;
                }그밖에{
                    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);
                }다른
                    $('at_box').style.display='none';
            }

最后是光标进入span标签,显示菜单.要鼠标재스팬标签再点一次才能显示菜单。至于원리，화 윗면에는 불량이 많습니다.

复主代码 代码如下:

         vm.check_mouse=function(e){
          var editor=$('editor'),a=getTextBeforeCursor(editor);
                if(!-[1,]){
              var b=avalon.parseHTML(getTextBeforeCursor(editor)).lastChild;
               }그밖에{
              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);
               }그밖에
                      $('at_box').style.display='none';
        };

커서가 범위 내에 있으면 해당 ID를 빼내고 이 ID를 기준으로 at_box의 위치를 ​​지정하며 cur_index를 재설정해야 합니다.

Ajax 업데이트 메뉴에서는 문자 매칭을 하지 않겠습니다

효과

파이어폭스

ie8

ie7

ie6

다운로드

위 내용은 본 글에 설명된 내용이 전부이며, 모든 분들이 자바스크립트를 이해하는데 도움이 되었으면 좋겠습니다.