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

[xiaozhiqiang15]

遇到个技术难题：一个可编辑的<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>后,再添加一個 并將游標移動到新首行

[xiaozhiqiang15]

请问能提供下代码吗？例如怎么判断当前 Range对象在<div>文本 的尾端？

[xiaozhiqiang15]

引用 1 楼 danica7773 的回复:

判斷一下，如果是在尾部回車，則添加<br>后,再添加一個 并將游標移動到新首行

这样写的话 1.尾部添加<br>  火狐会跳两行； 2.尾部添加<br>(没有“ ”)，火狐跳一行，但在下一行编辑时会自动跳一行。 不添加<br> 将光标移动，不能实现？

[葫芦八娃]

[葫芦八娃]

[xiaozhiqiang15]

楼上是要闹哪样？

[花木兰1闪21A]

https://code.csdn.net/snippets/58211#snippets1 e11没出来前写的，实现qq的写说说功能，支持@功能，你看看可有帮助

[xiaozhiqiang15]

直接在后面添加 <br> 的话 要写很多兼容代码： 仍求 直接可以移动光标方法！

[打字员]

上午倒騰了一下，個人覺得效果還是可以的，ie,firefox,chrome,safari,opera下都統一用br換行，且沒有LZ說的BUG 有時間的人可以看看，如果有BUG可以聯繫我，花點時間把這個功能搞完善了，以后說不定還有得用 https://code.csdn.net/snippets/209802

[open_java]

LZ 有解决方案了吗

[想想就可以了]

引用 8 楼 tlfu_12344 的回复:

https://code.csdn.net/snippets/58211#snippets1 e11没出来前写的，实现qq的写说说功能，支持@功能，你看看可有帮助

你给的这个网址元素的触发事件没写出来 是调用哪个方法

[ibleave60]

有个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'); } 楼主有啥更好的办法没？