最近做了一个可以回复留言的页面,主要包括:@、表情功能,一开始使用的是文本域textarea,最后发现这样无法显示表情,后来改成可编辑div,在div中添加contenteditable="true",则该div即可编辑。
<div contenteditable="true"></div>
在选择表情或者选择@某人后,会经常遇到选择后可编辑div中的光标不见了,或者显示的位置不对,于是在网上找了些方法,现在总结下:
function set_focus() { el=document.getElementById(‘guestbook_editor‘); //el=el[0]; //jquery 对象转dom对象 el.focus(); if($.support.msie) { var range = document.selection.createRange(); this.last = range; range.moveToElementText(el); range.select(); document.selection.empty(); //取消选中 } else { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } }
调用此方法,可以将光标放在可编辑div的最后。
参考地址:http://chwjbn.blog.163.com/blog/static/1038799201310762620681/
时间: 2024-11-05 14:44:01