技术CTO-关注编程入门知识,提供编程入门教程

您的位置: 首页 > 前端开发 > javascript > 正文

可编辑的<div contenteditable="true"> 回车替换浏览器默认操作问题

来源: 技术CTO 阅读:

遇到个技术难题:一个可编辑的<div contenteditable="true"> 回车替换浏览器默认操作(有的浏览器插入<br/>有的插入<p>有的插入<div>),现在想统一成插入<br>
代码:



//输入回车键监听
$divArea.keydown(function(event){
if(event.keyCode==13 || event.charCode == 13){
HtmlUtils.insertHtmlToRange($('<br/>')[0], this);
     return false;
}
});

//工具类 HtmlUtils方法:
insertHtmlToRange : function(domNode, inputTarget) {
if(domNode == null || inputTarget == null){
return;
}
var sel = null;
var rang = null;
if( window.getSelection() ){
sel = window.getSelection();
rang = sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
if (rang === null) {
var message = "无法插入内容";
$.tipsWindown({content:'text:' + message, singleButton:true});
return;
}
rang.deleteContents();
// 如果选择的对象是输入框时执行操作
if (sel.focusNode === inputTarget.innerHTML
|| sel.focusNode.parentElement === inputTarget
|| sel.focusNode === inputTarget) {
rang.insertNode(domNode);
} else {
var tipMessage = "无法插入内容,请检查焦点是否在输入框中";
$.tipsWindown({content:'text:' + tipMessage, singleButton:true});
return;
}
//光标移动至末尾
if (document.implementation && document.implementation.hasFeature && document.implementation.hasFeature("Range", "2.0")) {
    var tempRange = document.createRange();
var chatmessage = inputTarget;
var position = rang.endOffset;
tempRange.selectNodeContents(chatmessage);
tempRange.setStart(rang.endContainer, rang.endOffset);
tempRange.setEnd(rang.endContainer, rang.endOffset);
sel.removeAllRanges();
sel.addRange(tempRange);
}
}else{//ie9 以下版本
textRange = document.selection.createRange();
if (textRange === null) {
var message = "无法插入内容";
$.tipsWindown({content:'text:' + message, singleButton:true});
return;
}
//插入 dom节点
textRange.collapse(false)
textRange.pasteHTML(domNode.outerHTML); 
    textRange.select();
}
},



以上代码有一个bug:在该<div>文字最后 按回车时 光标 位置不变,再次按回车(此时插入了第两个<br/>)光标才会移动到下方;
怎样才能在这个<div>最后文字按回车跟在文字其他地方按回车一样?有解决的思路不?
判斷一下,如果是在尾部回車,則添加<br>后,再添加一個&nbsp;并將游標移動到新首行
请问能提供下代码吗?例如怎么判断当前 Range对象在<div>文本 的尾端?
引用 1 楼 danica7773 的回复:
判斷一下,如果是在尾部回車,則添加<br>后,再添加一個&nbsp;并將游標移動到新首行

这样写的话  
1.尾部添加<br>&nbsp;  火狐会跳两行;
2.尾部添加<br>(没有“&nbsp;”),火狐跳一行,但在下一行编辑时会自动跳一行。

不添加<br> 将光标移动,不能实现?
\\\\\\\\\\
\\
楼上是要闹哪样?
\
直接在后面添加 <br> 的话 要写很多兼容代码:

仍求 直接可以移动光标方法!
 e11没出来前写的,实现qq的写说说功能,支持@功能,你看看可有帮助
上午倒騰了一下,個人覺得效果還是可以的,ie,firefox,chrome,safari,opera下都統一用br換行,且沒有LZ說的BUG
有時間的人可以看看,如果有BUG可以聯繫我,花點時間把這個功能搞完善了,以后說不定還有得用
LZ 有解决方案了吗

^_^ 如果您热爱技术、热爱编程,想与更多的朋友一起交流学习,欢迎加入本站官方QQ群:345733473 ^_^