怎样免费建设个人网站,四川省城乡住房与建设厅网站首页,北京顺义有网站建设公司吗,域名iis网站添加评论回复是个很常见的东西#xff0c;但是各大网站实现的方式却不尽相同。大体上有两种方式1.像优酷这种最常见#xff0c;在输入框中要回复的人#xff0c;这种方式下#xff0c;用www.cppcns.com户可以修改。新浪微博则是在这个基础上#xff0c;弹出好友菜单。这种方式…评论回复是个很常见的东西但是各大网站实现的方式却不尽相同。大体上有两种方式1.像优酷这种最常见在输入框中要回复的人这种方式下用www.cppcns.com户可以修改。新浪微博则是在这个基础上弹出好友菜单。这种方式的好处是不需要任何js,css处理兼容。2.像qq空间这种对回复的人整个删除。本屌感觉这种方式比较好但这种方式有些兼容性上的细节这个后面会详细说明。事实上qq空间的这种实现在效果上是兼容了ie和现代浏览器的做的非常好。上面是chromeie8ie7ie6就不上图片了太卡了都懂得最后本屌会附上最终例子的当然也兼容http://www.cppcns.comie6。下面就说说怎么实现的。先看看qq空间是怎么做的chrome上面可以看到qq空间是在button中加上文字这样在删除的时候对被回复的用户名就能整个删除了。不过这样做还不够首先是样式需要把button设置成inline-block消除button默认的透明背景边框当然还有padding,margin设为0复制代码 代码如下:button{ border: 0; background:none; }这时在ie6,7中插入会发现似乎还存在padding,而且还很大所以还需要加上overflow: visible;另外属性contenteditable设置成为false,否则光标会跳到button里面然后在ie8下会发现输入的时候如果有回车然后在依次删除的过程中会发现button标签删不掉光标会跑到button标签前面而且再次按右光标键或用鼠标点击button标签右边都无法让光标跑到button标签右边。事实上qq空间在ie8中也有这个问题ie8而在ie6,7下就没有这个问题ie7ie6这里针对ie8需要对文本框绑定dBryckeydown事件回调check_comment,对ie6,7绑定了也没有问题这里就统一的对ie绑定。function getPositionForTextArea(ctrl) { //获取光标位置var CaretPos 0;if(document.selection) {ctrl.focus();var Sel document.selection.createRange();var Sel2 Sel.duplicate();Sel2.moveToElementText(ctrl);var CaretPos -1;while(Sel2.inRange(Sel)){Sel2.moveStart(character);CaretPos;}}else if(ctrl.selectionStart || ctrl.selectionStart 0){CaretPos ctrl.selectionStart;}return (CaretPos);}vm.check_commentfunction(e,i){var agetPositionForTextArea($(replyi));if(e.keyCode8a3){var pat new RegExp(^.*? $,i);if(pat.test(this.innerHTML))this.innerHTML;}};光标位置3表明光标前面就是button标签了这时就可以清www.cppcns.com空输入框了。注意这里为了严谨用正则表达式验证是不是button标签.另外在正则表达式中button标签外包裹p标签是因为ie在按回车换行时会默认自动对前面的行包裹p标签。当然一开始在输入框也要在button标签外包裹p标签。题外话qq空间在ff上用的是img标签之前一直以为qq空间在现代浏览器上统一用的是img标签写的时候才发现在chrome中用的是button标签于是就在chrome下试了一下插入img标签发现怎么也弄不掉边框而且删除的时候绑定中光标位置的判断也会和ie不一致因为现代浏览器换行默认插入,于是索性对chrome也用button标签。另外在我的例子中ff中插入button标签的话输入框不容易获得焦点。本屌也懒得去改了,仍然是在ff中插入img标签对应的keydown回调if(!!-[1,]e.keyCode8$(replyi).childNodes.length2){//ffthis.innerHTML;retur只用判断输入框的子节点个数就可以了。最终效果chromeffie8ie7ie6附上例子下载以上所述就是本文的全部内容了希望大家能够喜欢。本文标题: 完美实现仿QQ空间评论回复特效本文地址: http://www.cppcns.com/ruanjian/java/124171.html
