Empêcher l'ajout de contenu modifiable <div> sur ENTER - Chrome

J'ai un contenteditableélément, et chaque fois que je tape des trucs et frappe, ENTERcela crée un nouveau<div> texte et y place le nouveau texte de ligne. Je n'aime pas ça du tout.

Est-il possible d'empêcher cela ou du moins de le remplacer par un <br>?

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

Remarque: ce n'est pas un problème dans Firefox.

Essaye ç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 une démo

Vous pouvez le faire avec juste un changement CSS:

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

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

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

Ajoutez du style display:inline-block;à contenteditable, il ne sera pas généré div, pet spanautomatiquement dans Chrome.

Essaye ç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/

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

Il remplace le comportement par défaut pour avoir un paragraphe à la place.

Sur Chrome, le comportement par défaut lors de l'entrée est:

<div>
    <br>
</div>

Avec cette commande, ça va être

<p>
    <br>
</p>

Maintenant qu'il est plus linéaire à travers, il est facile de l'avoir seulement <br>si vous en avez besoin.

Utilisez shift+ enterau lieu de enterpour insérer une seule <br>balise ou envelopper votre texte de <p>balises.

La façon dont contenteditablese comporte lorsque vous appuyez entersur dépend des navigateurs, <div>cela se produit sur Webkit (chrome, safari) et IE.

J'ai eu du mal avec cela il y a quelques mois et je l'ai corrigé de cette façon:

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

J'espère que cela aidera et désolé pour mon anglais s'il n'est pas aussi clair que nécessaire.

EDIT : Correction de la fonction jQuery suppriméejQuery.browser

Vous pouvez avoir des <p>balises distinctes pour chaque ligne plutôt que d'utiliser des <br>balises et obtenir une meilleure compatibilité avec le navigateur dès le départ.

Pour ce faire, placez une <p>balise avec du texte par défaut à l'intérieur de la div contenteditable.

Par exemple, au lieu de:

<div contenteditable></div>

Utilisation:

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

jsfiddle

Testé dans Chrome, Firefox et Edge, et le second fonctionne de la même manière dans chacun.

Le premier, cependant, crée des divs dans Chrome, crée des sauts de ligne dans Firefox, et dans Edge crée des divs et le curseur est remis au début du div actuel au lieu de passer au suivant.

Testé dans Chrome, Firefox et Edge.

J'aime utiliser Mousetrap pour gérer les raccourcis clavier: https://craig.is/killing/mice

Ensuite, je viens d'intercepter l'événement enter, en exécutant une commande insertLineBreak :

Mousetrap.bindGlobal('enter', (e)=>{
  window.document.execCommand('insertLineBreak', false, null);
  e.preventDefault();
});

Toutes les commandes: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Il fonctionne avec Chrome 75 et l'élément modifiable suivant:

<pre contenteditable="true"></pre>

Il est également possible d'utiliser insertHTML :

window.document.execCommand('insertHTML', false, "\n");

ajouter une valeur par défaut au div

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

J'utiliserais le style (Css) pour résoudre le problème.

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

Firefox ajoute en effet une rupture d'élément de bloc
, alors que Chrome enveloppe chaque section dans une balise. Votre css donne aux div un remplissage de 10px avec la couleur d'arrière-plan.

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

Vous pouvez également répliquer le même effet souhaité dans jQuery:

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

Voici une fourchette de votre violon http://jsfiddle.net/R4Jdz/7/

Vous pouvez envelopper vos paragraphes avec une <p>balise par exemple, elle apparaîtrait sur une nouvelle ligne au lieu de div Exemple:
<div contenteditable="true"><p>Line</p></div>
Après avoir inséré une nouvelle chaîne:
<div contenteditable="true"><p>Line</p><p>New Line</p></div>

La inserHTMLsolution de commande fait des choses étranges lorsque vous avez des contenteditableéléments imbriqués .

J'ai pris quelques idées de plusieurs réponses ici, et cela semble répondre à mes besoins pour le moment:

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

Essayez d'utiliser ckeditor. Il fournit également un formatage comme celui-ci dans SOF.

https://github.com/galetahub/ckeditor

Nous devons d'abord capturer chaque entrée d'utilisateur clé pour voir si Entrée est enfoncée, puis nous empêchons la <div>création et nous créons la nôtre<br> balise.

Il y a un problème, lorsque nous le créons, notre curseur reste à la même position, nous utilisons l' API de sélection pour placer notre curseur à la fin.

N'oubliez pas d'ajouter une <br>balise à la fin de votre texte car si vous ne le faites pas, la première entrée ne fera pas de nouvelle ligne.

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

Violon

Il s'agit d'un éditeur HTML5 dirigé par un navigateur. Vous pouvez envelopper votre texte avec <p>...</p>, puis chaque fois que vous appuyez sur ENTRÉE, vous obtenez <p></p>. En outre, l'éditeur fonctionne de cette façon que chaque fois que vous appuyez sur MAJ + ENTRÉE, il insère <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>

Vérifiez ceci: http://jsfiddle.net/ZQztJ/

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. Une fois l'édition terminée, les éléments peuvent contenir une fin à l' <br>intérieur. Mais vous pouvez ajouter du code pour réduire cela si vous en avez besoin.

Cochez cette réponse pour supprimer le https://stackoverflow.com/a/61237737/670839 de fin<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>')

Où thisest le contexte réel qui signifie document.getElementById('test');.

Une autre façon de le faire

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

Empêcher la création de nouvelles Div dans le contenu éditable Div sur chaque touche d'entrée: La solution que j'ai trouvée est très simple:

var newdiv = document.createElement("div"); 
newdiv.innerHTML = "Your content of div goes here";
myEditablediv.appendChild(newdiv);

Ce contenu --- innerHTML empêche la création d'une nouvelle division dans un contenu div modifiable à chaque touche d'entrée.

Le brouillon de l'éditeur W3C contient des informations sur l'ajout d'états dans ContentEditable et vous pouvez utiliser pour empêcher le navigateur d'ajouter un nouvel élément lorsque vous appuyez sur Entrée plaintext-only.

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

Il est possible d'empêcher complètement ce comportement.

Voir ce violon

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