wake-up-neo.com

Verhindern, dass inhaltlich editierbares <div> in ENTER - Chrome hinzugefügt wird

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.

javascriptjquerygoogle-chromehtmlcontenteditable
95
iConnor

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

Demo hier

144
Ram G Athreya

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

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

41
airi

Wenn Sie den Stil display:inline-block; zu contenteditable hinzufügen, werden div, p und span nicht automatisch in Chrome generiert.

29
Le Tung Anh

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/

20
Andrew

Benutzen shift+enter anstatt enter um nur ein einzelnes <br> -Tag einzufügen oder Ihren Text in <p> -Tags einzuwickeln.

11
Blake Plumb
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.

10
Ced

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

6
Elie

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/

4
cbayram

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>

jsfiddle

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.

4
Josh Powlison

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

https://github.com/galetahub/ckeditor

3
Dan Rey Oquindo

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> 

3
nes

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

Fiddle

2
L105
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>')

Wobei this der tatsächliche Kontext ist, was document.getElementById('test'); bedeutet.

2
webprogrammer

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>";
    }
}
2
Math chiller

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/

2
Mehdi

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

https://jsfiddle.net/kzkxo70L/1/

1
Fábio Zangirolami

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/

1
BlueUnicorn

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.

1
DrShyam Babu Gupta

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

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