可编辑的
回车替换浏览器默认操作问题

xiaozhiqiang15 2014-02-26 12:53:27
遇到个技术难题:一个可编辑的<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>最后文字按回车跟在文字其他地方按回车一样?有解决的思路不?
...全文
1399 12 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
ibleave60 2014-12-12
  • 打赏
  • 举报
回复
有个bug,当连输入两次回车后,后面再输入文字,再输入回车,要按2次才有效。把你这代码做了下小改动。 存在type='_moz'时,把它移入最后一个br里 if($(_this).find("br[type='_moz']").length>0){ $(_this).find("br").removeAttr('type'); $(_this).find("br:last").attr('type', '_moz'); } 楼主有啥更好的办法没?
想想就可以了 2014-12-12
  • 打赏
  • 举报
回复
引用 8 楼 tlfu_12344 的回复:
https://code.csdn.net/snippets/58211#snippets1 e11没出来前写的,实现qq的写说说功能,支持@功能,你看看可有帮助
你给的这个网址元素的触发事件没写出来 是调用哪个方法
open_java 2014-07-16
  • 打赏
  • 举报
回复
LZ 有解决方案了吗
打字员 2014-02-28
  • 打赏
  • 举报
回复
上午倒騰了一下,個人覺得效果還是可以的,ie,firefox,chrome,safari,opera下都統一用br換行,且沒有LZ說的BUG 有時間的人可以看看,如果有BUG可以聯繫我,花點時間把這個功能搞完善了,以后說不定還有得用 https://code.csdn.net/snippets/209802
xiaozhiqiang15 2014-02-27
  • 打赏
  • 举报
回复
直接在后面添加 <br> 的话 要写很多兼容代码: 仍求 直接可以移动光标方法!
花木兰1闪21A 2014-02-27
  • 打赏
  • 举报
回复
https://code.csdn.net/snippets/58211#snippets1 e11没出来前写的,实现qq的写说说功能,支持@功能,你看看可有帮助
xiaozhiqiang15 2014-02-26
  • 打赏
  • 举报
回复
楼上是要闹哪样?
葫芦八娃 2014-02-26
  • 打赏
  • 举报
回复
葫芦八娃 2014-02-26
  • 打赏
  • 举报
回复
xiaozhiqiang15 2014-02-26
  • 打赏
  • 举报
回复
引用 1 楼 danica7773 的回复:
判斷一下,如果是在尾部回車,則添加<br>后,再添加一個 并將游標移動到新首行
这样写的话 1.尾部添加<br>  火狐会跳两行; 2.尾部添加<br>(没有“ ”),火狐跳一行,但在下一行编辑时会自动跳一行。 不添加<br> 将光标移动,不能实现?
xiaozhiqiang15 2014-02-26
  • 打赏
  • 举报
回复
请问能提供下代码吗?例如怎么判断当前 Range对象在<div>文本 的尾端?
打字员 2014-02-26
  • 打赏
  • 举报
回复
判斷一下,如果是在尾部回車,則添加<br>后,再添加一個 并將游標移動到新首行

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧