xiaozhiqiang15 文思海辉 Web前端工程师  2014年02月26日
可编辑的<div contenteditable="true"> 回车替换浏览器默认操作问题
遇到个技术难题:一个可编辑的<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>最后文字按回车跟在文字其他地方按回车一样?有解决的思路不?
...全文
881 点赞 收藏 12
写回复
12 条回复

还没有回复,快来抢沙发~

发动态
发帖子
JavaScript
创建于2007-09-28

5.1w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
社区公告
暂无公告