js完美实现@提到好友特效（兼容各大浏览器）

1.输入@时，弹出匹配的好友菜单

2.光标进入包含有"@好友"的标签时，弹出菜单

3.按backspace删除时，如果光标前面是包含有"@好友"的标签，弹出菜单

4.兼容ie,firefox.

具体做法

针对要求一，很自然的会想到对输入框绑定事件。这里要绑定mousedown,而不是mouseup.因为如果是mouseup的话，用event.preventDefault()是无法阻止键盘输入@的。另外，这里在事件回调中用return false也是起不了作用的。

绑定mousedown事件后，就要插入自定义的包含有"@好友"的标签了。新浪微博的输入框是用textarea做的，无法知道其内部是怎样处理的，只好看百度贴吧了。

可以看到，贴吧是插入了<span></span>标签。这应该是方便后台用正则表达式匹配。

具体的

复制代码 代码如下:

        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("&nbsp;<span>@</span>&nbsp;");
                }else{
                    document.execCommand("insertHtml", false,"&nbsp;<span>@</span>&nbsp;");
                }
                e.preventDefault();
            }
        };

这里需要在光标处插入，所以用到了range.

然后就是菜单显示了，关键在于怎么定位。我的做法很垃圾，就是为插入的span添加id，然后根据span id的位置为菜单定位。如果有更好的做法，请告诉我一声。

具体的

复制代码 代码如下:

    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("&nbsp;<span>@</span>&nbsp;");
                }else{
                    document.execCommand("insertHtml", false,"&nbsp;<span>@</span>&nbsp;");
                }
                at_box_show('at'+at_index);
                cur_index=at_index;
                e.preventDefault();
            }
        };
    });