防止contenteditable在ENTER上添加<div> – Chrome
我有一个contenteditable元素，每当我键入一些东西，并点击ENTER ，创build一个新的<div> ，并将新的行文本放在那里。 我不喜欢这一点点。
是否有可能防止这种情况发生，或者至less只是用一个<br>replace它？
这里是演示http://jsfiddle.net/jDvau/
注意： 这在Firefox中不是问题。
尝试这个
$('div[contenteditable]').keydown(function(e) { // trap the return key being pressed if (e.keyCode === 13) { // insert 2 br tags (if only one br tag is inserted the cursor won't go to the next line) document.execCommand('insertHTML', false, '<br><br>'); // prevent the default behaviour of return key pressed return false; } });
在这里演示
你可以做一个CSS更改：
div{ background: skyblue; padding:10px; display: inline-block; } pre{ white-space: pre-wrap; background: #EEE; }
添加样式display:inline-block; 以contenteditable ，它不会在Chrome中自动生成div ， p和span 。
尝试这个：
$('div[contenteditable="true"]').keypress(function(event) { if (event.which != 13) return true; var docFragment = document.createDocumentFragment(); //add a new line var newEle = document.createTextNode('\n'); docFragment.appendChild(newEle); //add the br, or p, or something else newEle = document.createElement('br'); docFragment.appendChild(newEle); //make the br replace selection var range = window.getSelection().getRangeAt(0); range.deleteContents(); range.insertNode(docFragment); //create a new range range = document.createRange(); range.setStartAfter(newEle); range.collapse(true); //make the cursor there var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); return false; });
使用Shift + Enter而不是Enter键来放置一个单独的<br>标签，或者用<p>标签包装你的文本。
当你按下回车键的时候， contenteditable行为取决于浏览器， <div>发生在webkit（chrome，safari）和IE上。
我在几个月前挣扎着，我这样纠正它：
//I recommand you trigger this in case of focus on your contenteditable if( navigator.userAgent.indexOf("msie") > 0 || navigator.userAgent.indexOf("webkit") > 0 ) { //Add <br> to the end of the field for chrome and safari to allow further insertion if(navigator.userAgent.indexOf("webkit") > 0) { if ( !this.lastChild || this.lastChild.nodeName.toLowerCase() != "br" ) { $(this).html( $(this).html()+'<br />' ); } } $(this).keypress( function(e) { if( ( e.keyCode || e.witch ) == 13 ) { e.preventDefault(); if( navigator.userAgent.indexOf("msie") > 0 ) { insertHtml('<br />'); } else { var selection = window.getSelection(), range = selection.getRangeAt(0), br = document.createElement('br'); range.deleteContents(); range.insertNode(br); range.setStartAfter(br); range.setEndAfter(br); range.collapse(false); selection.removeAllRanges(); selection.addRange(range); } } }); }
我希望这会有所帮助，如果不是很清楚，我的英文不好意思。
编辑 ：更正删除的jQueryfunctionjQuery.browser
我会使用样式（Css）来解决这个问题。
div[contenteditable=true] > div { padding: 0; }
Firefox确实增加了一个块元素中断
，而Chrome将每个部分包装在一个标签中。 你的CSS给div的填充10px与背景颜色。
div{ background: skyblue; padding:10px; }
或者，您可以在jQuery中复制相同的效果：
var style = $('<style>p[contenteditable=true] > div { padding: 0;}</style>'); $('html > head').append(style);
这里是你的小提琴的叉子http://jsfiddle.net/R4Jdz/7/
添加一个防止默认的div
document.body.div.onkeydown = function(e) { if ( e.keycode == 13 ){ e.preventDefault(); //add a <br> div = document.getElementById("myDiv"); div.innerHTML += "<br>"; } }
尝试使用ckeditor。 它也提供像SOF这样的格式。
你可以用<p>标签来包装你的段落，例如它会覆盖新行而不是div例子：
<div contenteditable="true"><p>Line</p></div>
插入新string后：
<div contenteditable="true"><p>Line</p><p>New Line</p></div>
首先，我们需要捕获每个关键用户input，看看是否按下了input，然后我们阻止<div>创build，并创build自己的<br>标记。
有一个问题，当我们创build它时，我们的光标停留在相同的位置，所以我们使用Selection API将光标放在最后。
不要忘记在文本的末尾添加一个<br>标签，因为如果你没有第一个input就不会做一个新的行。
$('div[contenteditable]').on('keydown', function(e) { var key = e.keyCode, el = $(this)[0]; // If Enter if (key === 13) { e.preventDefault(); // Prevent the <div /> creation. $(this).append('<br>'); // Add the <br at the end // Place selection at the end // http://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } } });
小提琴
这是浏览器导向的HTML5编辑器。 你可以用<p>...</p>包装你的文本，然后每当你按下ENTER键，你就会得到<p></p> 。 此外，编辑器这样工作，每当你按SHIFT + ENTER它插入<br /> 。
<div contenteditable="true"><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor veniam asperiores laudantium repudiandae doloremque sed perferendis obcaecati delectus autem perspiciatis aut excepturi et nesciunt error ad incidunt impedit quia dolores rerum animi provident dolore corporis libero sunt enim. Ad magnam omnis quidem qui voluptas ut minima similique obcaecati doloremque atque! <br /><br /> Type some stuff, hit ENTER a few times, then press the button. </p> </div>
检查这个： http : //jsfiddle.net/ZQztJ/
if (navigator.userAgent.toLowerCase().indexOf('msie') > -1) { var range = document.getSelection(); range.pasteHTML(range.htmlText + '<br><br>'); } else if(navigator.userAgent.toLocaleLowerCase().indexOf('trident') > -1) { var range = document.getSelection().getRangeAt(0); //get caret var nnode = document.createElement('br'); var bnode = document.createTextNode('\u00A0'); // range.insertNode(nnode); this.appendChild(bnode); range.insertNode(nnode); } else document.execCommand('insertHTML', false, '<br><br>')
如果this是实际的上下文，这意味着document.getElementById('test'); 。
您可以为每行分配不同的<p>标签，而不是使用<br>标签，并获得更大的浏览器兼容性。
要做到这一点，把一个<p>标签与contenteditable div内的一些默认文本。
例如，而不是：
<div contenteditable></div>
使用：
<div contenteditable> <p>Replace this text with something awesome!</p> </div>
的jsfiddle
在Chrome，Firefox和Edgetesting，第二个在每个都是一样的。
然而，第一个是在Chrome中创builddiv，在Firefox中创build换行符，在Edge中创builddiv ，并将光标放回到当前div的开头，而不是移动到下一个。
在Chrome，Firefox和Edge上进行testing。
另一种方法来做到这一点
$('button').click(function(){ $('pre').text($('div')[0].outerHTML) }); $("#content-edit").keydown(function(e) { if(e.which == 13) { $(this).find("div").prepend('<br />').contents().unwrap(); } });
我有这个相同的问题，并find了解决scheme（CHROME，MSIE，FIREFOX），按照我的代码在链接。
$(document).on('click','#myButton',function() { if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) var str = $('#myDiv').html().replace(/<br>/gi,'').replace(/<div>/gi,'<br>').replace(/<\/div>/gi,''); else if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) var str = $('#myDiv').html().replace(/<\/br>/gi,'').replace(/<br>/gi,'<br>').replace(/<\/br>/gi,''); else if (navigator.userAgent.toLowerCase().indexOf("msie") == -1) var str = $('#myDiv').html().replace(/<br>/gi,'').replace(/<p>/gi,'<br>').replace(/<\/p>/gi,''); $('#myDiv2').removeClass('invisible').addClass('visible').text(str); $('#myDiv3').removeClass('invisible').addClass('visible').html(str); });
document.execCommand('defaultParagraphSeparator', false, 'p');
它会覆盖默认行为而不是段落。
在chrome上input的默认行为是：
<div> <br> </div>
用这个命令就是了
<p> <br> </p>
现在，它是更线性的，很容易只有你会需要。
完全可以防止这种行为。
看到这个小提琴
$('<div class="temp-contenteditable-el" contenteditable="true"></div>').appendTo('body').focus().remove();
防止内容编辑新科创build每个input键Div：解决scheme我发现很简单：
var newdiv = document.createElement("div"); newdiv.innerHTML = "Your content of div goes here"; myEditablediv.appendChild(newdiv);
这个— innerHTML内容阻止每个input键在内容可编辑Div中创build新Div。
