爱程序网

另一种场景下的js @提到好友

来源: 阅读:

转载请注明: TheViper http://www.cnblogs.com/TheViper 

在输入框中@好友这个功能很常见,具体效果大概有两种:

1.像js实现@提到好友,在输入框中输入@时,根据@后面的字符,弹出相应好友菜单。

2.增加一个按钮,点击后出现包含所有好友的弹出层。

本文就介绍本屌在实现第二种@时走过的一些坑。为了简单,其中的什么弹出层,拉数据就不说了。

先说下要求:

1.添加@好友时,无论编辑器有没有焦点,@好友都会被添加到上一个焦点位置,效果和更简单的 编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入)中的一样。

2.添加到上一个焦点位置后,无论编辑器有没有焦点,光标自动出现在@好友之后。

3.如果要删除@,必须是@+好友一块删除,就像关于qq空间评论回复的一点研究中删除回复好友一样。图为qq空间评论框

4.同2类似,删除整块@好友后,光标停留到@好友前面的位置。

5.兼容firefox,chrome,ie6 7 8.

第一点和第二点用更简单的 编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入)就很容易实现,只不过这里传入的不是img src地址,而是html.至于传入的html,还是firefox传入<img>标签.

html="<img alt="@"+name+"' onclick='return false;' contenteditable='false' class='mention'>&nbsp;";

ie和chrome传入<button>标签。

html="<button onclick='return false;' class='mention' contentEditable='false' >@"+name+"</button>&nbsp;";

另外对于editor对象的插入方法需要像上一篇,做点修改,使得在原来光标位置插入html后,光标紧跟其后。

对于第三点,如果不写其他代码看下效果有多坑爹。

firefox

可以看到当光标移到@好友后面时,按backspace,怎么都删除不了。

chrome

可以看到光标不光会跳到@好友里面,甚至可以直接鼠标点击到@好友里面。

ie8

可以看到ie8居然神奇的满足所有要求,ie6,ie7结果也一样,就不贴出来了。

首先解决第三点,@好友必须是整块删除。

本屌想到的是对编辑器添加keydown事件,原因参见js实现@提到好友。当按backspace时,判断此时光标前的html的lastChild是不是相应的包裹@好友的标签(firefox <img>,ie chrome <button>),如果是,就把标签删除了。具体的

获取光标前的html,这个在js实现@提到好友中出现过,这里因为后面要用到它的range,所以把range也返回了。

        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,range];        }

在现代浏览器中,这个函数返回的是FragmentDocument.然后把FragmentDocument中的lastChild,也就是相应的包裹@好友的标签删掉,再放回光标后的node前面。

            check_key:function(e){                var htmlBeforeCursor=getTextBeforeCursor($('editor')),frag=htmlBeforeCursor[0],range=htmlBeforeCursor[1],                last_node=frag.lastChild;                if(last_node!=null&&last_node.nodeType==3&&last_node.nodeValue=="")                    last_node=last_node.previousSibling;                if(last_node!=null&&last_node.className=='mention'){                    if(last_node.nodeName=='IMG'||last_node.nodeName=='BUTTON'){                        frag.removeChild(last_node)                        range.deleteContents();                        $('editor').insertBefore(frag,$('editor').childNodes[0])                        e.preventDefault();                    }                }            }

第一个if是排除在删除过程中,可能会多出值为""的TextNode.

当然也可以通过其他方法,找出相应的包裹@好友的标签,然后removeChild()删除。

效果

firefox

可以看到相应的包裹@好友的标签是可以整块删除了,不过删除后光标跑到最前面了。

chrome

和firefox一样,可以成功整块删除,但是这里删除后,编辑器没有焦点了。

第三点貌似是解决了,下面解决第四点,删除整块后,光标跳到删除块之前。

注意到上一篇中document.execCommand("insertHtml",false,html);,可以在插入后,让光标紧随其后。

        this.insertImage=function(html){            this.restoreSelection();            if(document.selection)                currentRange.pasteHTML(html);             else{                container.focus();                document.execCommand("insertHtml",false,html);                currentRange.collapse();            }            saveSelection();        };

这里对删除完包裹标签的FragmentDocument使用它,而不是之前的$('editor').insertBefore(frag,$('editor').childNodes[0]).具体的,

            check_key:function(e){                var htmlBeforeCursor=getTextBeforeCursor($('editor')),frag=htmlBeforeCursor[0],range=htmlBeforeCursor[1],                last_node=frag.lastChild;                if(last_node!=null&&last_node.nodeType==3&&last_node.nodeValue=="")                    last_node=last_node.previousSibling;                if(last_node!=null&&last_node.className=='mention'){                    if(last_node.nodeName=='IMG'||last_node.nodeName=='BUTTON'){                        frag.removeChild(last_node)                        range.deleteContents();                        var div=document.createElement('div');                        div.appendChild(frag);                        document.execCommand("insertHtml",false,div.innerHTML);                        div=null;                        e.preventDefault();                    }                }            }

创建一个div element,把FragmentDocument添加到里面,然后通过div element的innerHTML得到删除完包裹标签的html,最后document.execCommand("insertHtml",false,html);

效果

firefox

可以看到firefox是达到要求了。

chrome

可以看到删除是成功了,光标位置也没问题,就是多了很多无意义的空包裹标签。这是因为chrome在document.execCommand("insertHtml",false,html);时,很坑爹的把<button>标签的contenteditable属性自动删掉了,即便后面再去setAttribute添加contenteditable属性也没用。而在firefox下就不存在这个问题,<img>标签仍然有contenteditable属性,使得光标不会跳到标签里面。

怎么解决?只有对chrome不用document.execCommand("insertHtml",false,html);.但是在光标处插入@好友的方法中也使用了document.execCommand("insertHtml",false,html);。没办法,只有重写chrome在光标处插入@好友的部分,这里要用到一直在监听编辑器而随时在变化的editor封装里的currentRange.

                if(isChrome){                    html="<button onclick='return false;' class='mention' contentEditable='false' >@"+name+"</button>&nbsp;";                    $('editor').focus();                    var sel=window.getSelection(),range=at_editor.getRange(),node=avalon.parseHTML(html);                    range.insertNode(node);                    range.collapse();                    sel.removeAllRanges();                    sel.addRange(range);                    // at_editor.insertImage(html);                }

为此还要在editor封装里暴露currentRange。

        this.getRange=function(){            return currentRange;        }

这下就可以保证,在添加的@好友标签中存在contenteditable=“false”了。另外,也不用在删除时判断FragmentDocument的lastChild是不是<button>标签了。因为<button>标签里有contenteditable=“false”,删除后光标会自动跳到@好友标签前面位置。

效果

 

最后附上例子下载

更新:

firefox下,按<-左箭头移动光标时,如果光标左边是@好友标签,就会删除标签,所以删除标签时需要判断按键是不是backspace键。

                if(e.keyCode==8&&last_node!=null&&last_node.className=='mention'){                  ....                }

 

相关文章列表:
关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助