Ich habe ein contenteditable
-Element, und wenn ich etwas eingeben und auf ENTER
tippe, wird ein neuer <div>
erstellt und der neue Zeilentext dort eingefügt. Ich mag das nicht ein bisschen.
Kann man dies verhindern oder zumindest einfach durch einen <br>
ersetzen?
Hier ist Demo http://jsfiddle.net/jDvau/
Hinweis: Dies ist kein Problem in Firefox.
Versuche dies
$('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;
}
});
Sie können dies nur mit einer CSS-Änderung tun:
div{
background: skyblue;
padding:10px;
display: inline-block;
}
pre{
white-space: pre-wrap;
background: #EEE;
}
Wenn Sie den Stil display:inline-block;
zu contenteditable
hinzufügen, werden div
, p
und span
nicht automatisch in Chrome generiert.
Versuche dies:
$('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;
});
Benutzen shift+enter anstatt enter um nur ein einzelnes <br>
-Tag einzufügen oder Ihren Text in <p>
-Tags einzuwickeln.
document.execCommand('defaultParagraphSeparator', false, 'p');
Das Standardverhalten wird überschrieben, um stattdessen Absatz zu haben.
Auf Chrome lautet das Standardverhalten bei der Eingabe:
<div>
<br>
</div>
Mit diesem Befehl wird es sein
<p>
<br>
</p>
Da es jetzt linearer ist, ist es einfach, nur <br>
zu haben, den Sie benötigen.
Die Art und Weise, wie sich contenteditable
verhält, wenn Sie drücken enter Abhängig von den Browsern passiert der <div>
im Webkit (Chrome, Safari) und im Internet Explorer.
Ich hatte vor ein paar Monaten Probleme damit und habe es folgendermaßen korrigiert:
//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);
}
}
});
}
Ich hoffe, es hilft und entschuldige mich für mein Englisch, wenn es nicht so klar ist, wie es gebraucht wird.
EDIT: Korrektur der entfernten jQuery Funktion jQuery.browser
Ich würde Styling (Css) verwenden, um das Problem zu beheben.
div[contenteditable=true] > div {
padding: 0;
}
Firefox fügt tatsächlich einen Blockelementbruch hinzu
, während Chrome jeden Abschnitt eines Tags umschließt. Ihr CSS gibt divs eine Auffüllung von 10px zusammen mit der Hintergrundfarbe.
div{
background: skyblue;
padding:10px;
}
Alternativ können Sie den gleichen gewünschten Effekt in jQuery replizieren:
var style = $('<style>p[contenteditable=true] > div { padding: 0;}</style>');
$('html > head').append(style);
Hier ist eine Gabel deiner Geige http://jsfiddle.net/R4Jdz/7/
Sie können für jede Zeile separate <p>
-Tags verwenden, anstatt <br>
-Tags zu verwenden, um eine größere Browserkompatibilität zu erhalten.
Fügen Sie dazu ein <p>
-Tag mit einem Standardtext in das contenteditable div ein.
Zum Beispiel anstelle von:
<div contenteditable></div>
Benutzen:
<div contenteditable>
<p>Replace this text with something awesome!</p>
</div>
Getestet in Chrome, Firefox und Edge, und der zweite funktioniert bei jedem gleich.
Die erste erstellt jedoch divs in Chrome, erstellt Zeilenumbrüche in Firefox, und in Edge werden divs erstellt, und wird der Cursor an den Anfang des aktuellen div gesetzt, anstatt zum nächsten zu springen.
In Chrome, Firefox und Edge getestet.
Versuchen Sie es mit ckeditor. Es bietet auch Formatierungen wie diese in SOF.
Sie können Ihre Absätze mit dem Tag <p>
umschließen, zum Beispiel würde sie in einer neuen Zeile anstatt in div .__ erscheinen. Beispiel:<div contenteditable="true"><p>Line</p></div>
Nach dem Einfügen einer neuen Zeichenfolge:<div contenteditable="true"><p>Line</p><p>New Line</p></div>
Zuerst müssen wir jeden Key-Benutzer erfassen, um zu sehen, ob die Eingabetaste gedrückt wird. Dann wird die Erstellung von <div>
verhindert, und wir erstellen unser eigenes <br>
-Tag.
Es gibt ein Problem, wenn der Cursor an der gleichen Stelle bleibt, also verwenden Sie Selection API , um den Cursor am Ende zu platzieren.
Vergessen Sie nicht, am Ende Ihres Textes ein <br>
-Tag hinzuzufügen, da sonst keine Eingabe durch die erste Eingabe erfolgt.
$('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();
}
}
});
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>')
Wobei this
der tatsächliche Kontext ist, was document.getElementById('test');
bedeutet.
fügen Sie dem div einen Vorgabewert hinzu
document.body.div.onkeydown = function(e) {
if ( e.keycode == 13 ){
e.preventDefault();
//add a <br>
div = document.getElementById("myDiv");
div.innerHTML += "<br>";
}
}
Dies ist ein browsergesteuerter HTML5-Editor. Sie können Ihren Text mit <p>...</p>
umbrechen. Wenn Sie dann die EINGABETASTE drücken, erhalten Sie <p></p>
. Der Editor funktioniert auch so, dass bei jedem Drücken von UMSCHALT + EINGABETASTE <br />
eingefügt wird.
<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>
Überprüfen Sie dies: http://jsfiddle.net/ZQztJ/
Ich hatte das gleiche Problem und fand die Lösung (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);
});
Ein anderer Weg, es zu tun
$('button').click(function(){
$('pre').text($('div')[0].outerHTML)
});
$("#content-edit").keydown(function(e) {
if(e.which == 13) {
$(this).find("div").prepend('<br />').contents().unwrap();
}
});
Verhindern Sie die Erstellung neuer Divisionen in inhaltsbearbeitbaren Divisionen für jeden Eingabetaste: Lösung Die von mir gefundene Lösung ist sehr einfach:
var newdiv = document.createElement("div");
newdiv.innerHTML = "Your content of div goes here";
myEditablediv.appendChild(newdiv);
Dieser --- innerHTML-Inhalt verhindert die Erstellung neuer Divisionen in inhaltsbearbeitbaren Div-Werten für jede Eingabetaste.
Die inserHTML
-Befehlslösung führt einige seltsame Dinge aus, wenn Sie contenteditable
-Elemente verschachtelt haben.
Ich habe hier einige Ideen aus mehreren Antworten genommen, und dies scheint momentan für meine Bedürfnisse zu passen:
element.addEventListener('keydown', function onKeyDown(e) {
// Only listen for plain returns, without any modifier keys
if (e.which != 13 || e.shiftKey || e.ctrlKey || e.altKey) {
return;
}
let doc_fragment = document.createDocumentFragment();
// Create a new break element
let new_ele = document.createElement('br');
doc_fragment.appendChild(new_ele);
// Get the current selection, and make sure the content is removed (if any)
let range = window.getSelection().getRangeAt(0);
range.deleteContents();
// See if the selection container has any next siblings
// If not: add another break, otherwise the cursor won't move
if (!hasNextSibling(range.endContainer)) {
let extra_break = document.createElement('br');
doc_fragment.appendChild(extra_break);
}
range.insertNode(doc_fragment);
//create a new range
range = document.createRange();
range.setStartAfter(new_ele);
range.collapse(true);
//make the cursor there
let sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
e.stopPropagation();
e.preventDefault();
return false;
});
// See if the given node has a next sibling.
// Either any element or a non-empty node
function hasNextSibling(node) {
if (node.nextElementSibling) {
return true;
}
while (node.nextSibling) {
node = node.nextSibling;
if (node.length > 0) {
return true;
}
}
return false;
}
Ich benutze Mousetrap gerne, um Hotkeys zu bedienen: https://craig.is/killing/mice
Dann fange ich einfach das enter-Ereignis ab und führe einen Befehl aus insertLineBreak :
Mousetrap.bindGlobal('enter', (e)=>{
window.document.execCommand('insertLineBreak', false, null);
e.preventDefault();
});
Alle Befehle: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
Es funktioniert mit Chrome 75 und dem folgenden bearbeitbaren Element:
<pre contenteditable="true"></pre>
Es ist auch möglich insertHTML zu verwenden:
window.document.execCommand('insertHTML', false, "\n");