Empêcher le contenteditable d'ajouter <div> à l'entrée - Chrome

Question

J'ai un contenteditable élément, et chaque fois que je tape quelque chose et que j'appuie sur ENTER il crée un nouveau <div> et y place le texte de la nouvelle ligne. Je n'aime pas ça du tout.

Est-il possible d'empêcher que cela ne se produise ou, au moins, de le remplacer par une <br> ?

Voici la démo http://jsfiddle.net/jDvau/

Nota: Ce n'est pas un problème dans firefox.

Answer 1

Essayez ça :

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

Cliquez ici pour la démo

Answer 2

Ajouter un style display:inline-block; a contenteditable il ne générera pas div , p y span automatiquement dans Chrome.

Answer 3

Vous pouvez le faire en modifiant simplement le CSS :

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

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

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

Answer 4

Cela fonctionne dans tous les principaux navigateurs (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>

Il y a un inconvénient. Après avoir terminé l'édition, les éléments peuvent contenir une terminaison <br> à l'intérieur. Mais vous pouvez ajouter du code pour réduire cette quantité si nécessaire.

Vérifiez cette réponse pour enlever la queue <br> https://stackoverflow.com/a/61237737/670839

Answer 5

Essayez ça :

$('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/