js dengan sempurna menyedari kesan khas @sebutan rakan (serasi dengan semua pelayar utama)_kemahiran javascript

Keperluan

1. Apabila memasuki @, menu rakan yang sepadan akan muncul

2. Apabila kursor memasuki teg yang mengandungi "@rakan", menu timbul

3. Apabila menekan ruang belakang untuk memadam, jika terdapat teg yang mengandungi "@Rakan" di hadapan kursor, menu timbul

4. Serasi dengan IE, firefox.

Kaedah khusus

Untuk keperluan satu, adalah wajar untuk memikirkan peristiwa yang mengikat pada kotak input. Di sini kita perlu mengikat tetikus ke bawah, bukan tetikus ke atas Kerana jika ia adalah tetikus, event.preventDefault() tidak boleh menghalang papan kekunci daripada memasukkan @. Selain itu, menggunakan return false dalam panggilan balik acara tidak akan berfungsi.

Selepas mengikat acara turun tetikus, anda perlu memasukkan teg tersuai yang mengandungi "@rakan". Kotak input Sina Weibo diperbuat daripada textarea. Adalah mustahil untuk mengetahui cara ia diproses secara dalaman.

Seperti yang anda lihat, Tieba telah memasukkan teg Ini sepatutnya mudah untuk pemadanan latar belakang dengan ungkapan biasa.

Tertentu

Salin kod Kod adalah seperti berikut:

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

Di sini kita perlu memasukkan pada kursor, jadi kita menggunakan julat.

Kemudian menu dipaparkan, kuncinya ialah cara meletakkannya. Pendekatan saya sangat menyampah, iaitu menambah id pada span yang dimasukkan, dan kemudian meletakkan menu berdasarkan kedudukan span id. Jika ada cara yang lebih baik, sila beritahu saya.

Tertentu

Salin kod Kod adalah seperti berikut:

    fungsi di_box_show(at){
        var at_pos=avalon($(at)).kedudukan();
        $('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) {
                    julat = document.selection.createRange();
                    range.pasteHTML(" @ ");
                }lain{
                    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表示光标当前所在当前所在为位然后显示菜单。cur_index表示光标当前所在当前所在不不佮在举佮 id.用户可能倒回去改已经插入的span,而at_index是一直递增的，所以这里就还需要一个变量。

用户点击菜单中好友项，触发item_click回调。回调里就是将好友名字用innserHTML添墓加.隐藏菜单，at_index 。

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

复制代码 代码如下:

    fungsi getTextBeforeCursor(containerEl) {
        var precedingChar = "", sel, julat, precedingRange;
        jika (window.getSelection) {
            sel = window.getSelection();
            jika (sel.rangeCount > 0) {
                julat = sel.getRangeAt(0).cloneRange();
                range.collapse(true);
                range.setStart(containerEl, 0);
                precedingChar = range.cloneContents();
            }
        } else if ( (sel = document.selection)) {
            julat = sel.createRange();
            precedingRange = range.duplicate();
            precedingRange.moveToElementText(containerEl);
            precedingRange.setEndPoint("EndToStart", julat);
            precedingChar = precedingRange.htmlTeks;
        }
        kembali sebelumChar;
    }

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

具体的

复制代码 代码如下:                var a=getTextBeforeCursor($('editor'));

                       if(e.keyCode==8){

                jika(!-[1,]){
                    var b=avalon.parseHTML(a).lastChild;
                }lain{
                    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);
                }lain
                    $('at_box').style.display='none';
            }



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

复制代码 代码如下:

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

Perhatikan bahawa jika kursor berada dalam span, idnya mesti dikeluarkan, at_box diletakkan berdasarkan id ini dan cur_index mesti ditetapkan semula.

Bagi menu kemas kini ajax, saya tidak akan melakukan pemadanan aksara

Kesan

firefox

iaitu8

iaitu7

iaitu6

Muat turun

Di atas adalah semua kandungan yang diterangkan dalam artikel ini saya harap ia akan membantu semua orang untuk memahami javascript.