你的位置:首页 > Java教程

[Java教程]另一种场景下的js @提到好友


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

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

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

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

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

先说下要求:

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

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

3.如果要删除@,必须是@+好友一块删除,就像关于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”,删除后光标会自动跳到@好友标签前面位置。

效果

 

最后附上例子下载