Verhindern Sie das inhaltsbearbeitbare Hinzufügen von <div> in ENTER - Chrome

Ich habe ein contenteditableElement und wann immer ich etwas schreibe und treffeENTER , wird ein neues erstellt <div>und der neue Zeilentext dort eingefügt. Ich mag das kein bisschen.

Ist es möglich, dies zu verhindern oder zumindest einfach durch a zu ersetzen? <br> ?

Hier ist die 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/>');
        // prevent the default behaviour of return key pressed
        return false;
    }
});

Klicken Sie hier für eine Demo

Sie können dies mit nur einer CSS-Änderung tun:

div{
    background: skyblue;
    padding:10px;
    display: inline-block;
}

pre{
    white-space: pre-wrap;
    background: #EEE;
}

http://jsfiddle.net/ayiem999/HW43Q/

Stil hinzufügen , display:inline-block;um contenteditablees nicht zu generieren div, pund spanautomatisch in Chrome.

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;
});

http://jsfiddle.net/rooseve/jDvau/3/

document.execCommand('defaultParagraphSeparator', false, 'p');

Es überschreibt das Standardverhalten, stattdessen einen Absatz zu haben.

Auf Chrome lautet das Standardverhalten bei der Eingabe:

<div>
    <br>
</div>

Mit diesem Befehl wird es sein

<p>
    <br>
</p>

Jetzt, da es linearer ist, ist es einfach zu haben, nur <br>was Sie brauchen würden.

Verwenden Sie shift+ enteranstatt enternur ein einzelnes <br>Tag einzufügen oder Ihren Text in <p>Tags zu verpacken .

Die Art und Weise, contenteditablewie Sie sich beim Drücken verhalten, enterhängt von den Browsern ab<div> ab. Dies geschieht im Webkit (Chrome, Safari) und im Internet Explorer.

Ich hatte vor ein paar Monaten damit zu kämpfen 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 wird helfen und entschuldige mein Englisch, wenn es nicht so klar wie nötig ist.

BEARBEITEN : Korrektur der entfernten jQuery-FunktionjQuery.browser

Ich verwende Mousetrap gerne zum Behandeln von Hotkeys: https://craig.is/killing/mice

Dann fange ich einfach das enter-Ereignis ab und führe einen Befehl insertLineBreak aus :

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");

Fügen Sie dem div einen Verhindern-Standard hinzu

document.body.div.onkeydown = function(e) {
    if ( e.keycode == 13 ){
        e.preventDefault();
            //add a <br>
        div = document.getElementById("myDiv");
        div.innerHTML += "<br>";
    }
}

Ich würde Styling (Css) verwenden, um das Problem zu beheben.

div[contenteditable=true] > div {
  padding: 0;
} 

Firefox fügt in der Tat einen Blockelementbruch hinzu
, während Chrome jeden Abschnitt in ein Tag einschließt. Sie CSS gibt Divs eine Auffüllung von 10px zusammen mit der Hintergrundfarbe.

div{
  background: skyblue;
  padding:10px;
}

Alternativ können Sie denselben gewünschten Effekt in jQuery replizieren:

var style = $('<style>p[contenteditable=true] > div { padding: 0;}</style>');
$('html > head').append(style);

Hier ist eine Gabel Ihrer Geige http://jsfiddle.net/R4Jdz/7/

Sie können <p>für jede Zeile separate Tags verwenden, anstatt <br>Tags zu verwenden, und sofort eine bessere Browserkompatibilität erzielen.

Fügen Sie dazu ein <p>Tag mit einem Standardtext in das inhaltsbearbeitbare div ein.

Zum Beispiel anstelle von:

<div contenteditable></div>

Verwenden:

<div contenteditable>
   <p>Replace this text with something awesome!</p>
</div>

jsfiddle

Getestet in Chrome, Firefox und Edge, und die zweite funktioniert jeweils gleich.

Der erste erstellt jedoch Divs in Chrome, erstellt Zeilenumbrüche in Firefox und in Edge erstellt Divs, und der Cursor wird am Anfang des aktuellen Divs zurückgesetzt, anstatt zum nächsten zu wechseln.

Getestet in Chrome, Firefox und Edge.

Sie können Ihre Absätze mit einem <p>Tag umschließen, das beispielsweise in einer neuen Zeile anstelle von div angezeigt wird. 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>

Die inserHTMLBefehlslösung macht einige seltsame Dinge, wenn Sie verschachtelte contenteditableElemente haben.

Ich habe hier einige Ideen aus mehreren Antworten übernommen, und dies scheint vorerst meinen Bedürfnissen zu entsprechen:

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;
}

Versuchen Sie es mit ckeditor. Es bietet auch eine Formatierung wie diese in SOF.

https://github.com/galetahub/ckeditor

Zuerst müssen wir jeden Schlüssel erfassen, den Benutzer eingeben, um zu sehen, ob die Eingabetaste gedrückt wird. Dann verhindern wir die <div>Erstellung und erstellen unsere eigenen<br> Tag.

Es gibt ein Problem: Wenn wir es erstellen, bleibt unser Cursor an derselben Position, sodass wir die Auswahl-API verwenden , um unseren Cursor am Ende zu platzieren.

Vergessen Sie nicht, <br>am Ende Ihres Textes ein Tag hinzuzufügen, da sonst bei der ersten Eingabe keine neue Zeile erstellt wird.

$('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();
        }
    }
});

Geige

Dies ist ein browsergesteuerter HTML5-Editor. Sie können Ihren Text mit <p>...</p>umbrechen und erhalten dann jedes Mal, wenn Sie die EINGABETASTE drücken <p></p>. Außerdem funktioniert der Editor so, dass er bei jedem Drücken von UMSCHALT + EINGABE eingefügt wird <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>

Überprüfen Sie dies: http://jsfiddle.net/ZQztJ/

Dies funktioniert in allen gängigen Browsern (Chrome, Firefox, Safari, Edge).

document.addEventListener('keydown', event => {
  if (event.key === 'Enter') {
    document.execCommand('insertLineBreak')
    event.preventDefault()
  }
})

<div class="element" contenteditable="true">Sample text</div>
<p class="element" contenteditable="true">Sample text</p>

Es gibt eine Unannehmlichkeit. Nach Abschluss der Bearbeitung enthalten die Elemente möglicherweise eine Endung im <br>Inneren. Sie können jedoch Code hinzufügen, um dies bei Bedarf zu reduzieren.

Überprüfen Sie diese Antwort, um das nachfolgende https://stackoverflow.com/a/61237737/670839 zu entfernen<br>

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'); //&nbsp;
   range.insertNode(nnode);
   this.appendChild(bnode);
   range.insertNode(nnode);                                
}
else
   document.execCommand('insertHTML', false, '<br><br>')

Wo thisist der tatsächliche Kontext, was bedeutet document.getElementById('test');.

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();
      }
});

http://jsfiddle.net/jDvau/11/

Verhindern Sie die Erstellung neuer Divs in inhaltsbearbeitbaren Divs bei jeder Eingabetaste: Die Lösung, die ich gefunden habe, 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 Divs in inhaltsbearbeitbaren Divs bei jeder Eingabetaste.

Im Entwurf des W3C-Editors finden Sie einige Informationen zum Hinzufügen von Status zu ContentEditable . Um zu verhindern, dass der Browser beim Drücken der Eingabetaste neue Elemente hinzufügt, können Sie diese verwenden plaintext-only.

<div contentEditable="plaintext-only"></div>

Es ist möglich, dieses Verhalten vollständig zu verhindern.

Sehen Sie diese Geige

$('<div class="temp-contenteditable-el" contenteditable="true"></div>').appendTo('body').focus().remove();