Empêcher les sauts de ligne / paragraphe dans le contenuEditable

Question

Lorsque vous utilisez contentEditable dans Firefox, existe-t-il un moyen d'empêcher l'utilisateur d'insérer des sauts de paragraphe ou de ligne en appuyant sur Entrée ou sur Maj + Entrée?

Answer 1

Vous pouvez attacher un gestionnaire d'événement à l'événement keydown ou keyress pour le champ contentEditable et annuler l'événement si le code clé s'identifie comme entrée (ou shift + entrée).

Ceci désactivera enter / shift + enter complètement lorsque le focus est dans le champ contentEditable.

Si vous utilisez jQuery, quelque chose comme:

$("#idContentEditable").keypress(function(e){ return e.which != 13; });

... qui renverra false et annulera l'événement de frappe lors de l'entrée.

Answer 2

C’est possible avec Vanilla JS, avec le même effort:

document.getElementById('idContentEditable').addEventListener('keypress', (evt) => {
    if (evt.which === 13) {
        evt.preventDefault();
    }
});

Vous ne devez pas utiliser jQuery pour les choses les plus simples. Vous pouvez également utiliser la touche " clé " au lieu de "quot": https://developer.mozilla.org / fr-fr / docs / Web / Evénements / pression de la touche

Mettre à jour, car appuyer sur une touche est obsolète:

document.getElementById('idContentEditable').addEventListener('keydown', (event) => {
    if (event.keyCode === 13) {
        evt.preventDefault();
    }
});

Answer 3

Ajoutez la règle CSS suivante aux masques des sauts de ligne. Ceci est seulement un paramètre de style, vous devez ajouter des gestionnaires d’événements pour empêcher l’insertion de sauts de ligne:

.your_editable br {
    display: none
}

Answer 4

Si vous utilisez le framework JQuery, vous pouvez le définir à l'aide de la méthode on qui vous permettra d'avoir le comportement souhaité sur tous les éléments, même si celui-ci a été ajouté récemment.

$(document).on('keypress', '.YourClass', function(e){
    return e.which != 13; 
});   

Answer 5

Une autre option consiste à autoriser la saisie de pauses mais à les supprimer en cas de flou. cela a l'avantage de traiter le contenu collé. vos utilisateurs l'aimeront ou le détesteront (selon vos utilisateurs).

function handle_blur(evt){
  var elt=evt.target; elt.innerText=elt.innerText.replace(/\n/g,' ');
}

puis, en HTML:

<span onblur="handle_blur(event)" contenteditable>editable text</span>

Answer 6

Outre l'ajout de sauts de ligne, le navigateur ajoute des balises et des styles supplémentaires (lorsque vous collez du texte, le navigateur ajoute également le style de texte collé).

Le code ci-dessous couvre tout.

• Lorsque vous appuyez sur Entrée, aucun saut de ligne n'est ajouté.

• Lorsque vous collez du texte, tous les éléments ajoutés par le navigateur sont supprimés du texte.

  $('[contenteditable]').on('paste', function(e) {
      //strips elements added to the editable tag when pasting
      var $self = $(this);
      setTimeout(function() {$self.html($self.text());}, 0);
  }).on('keypress', function(e) {
       //ignores enter key
       return e.which != 13;
  });
  

Cliquez ici pour voir un exemple en direct

Answer 7

$("#idContentEditable").keypress(function(e){ return e.which != 13; });

La solution proposée par Kamens ne fonctionne pas dans Opera, vous devez plutôt joindre un événement au document.

/**
 * Pass false to enable
 */
var disableEnterKey = function(){
    var disabled = false;

    // Keypress event doesn't get fired when assigned to element in Opera
    $(document).keypress(function(e){
        if (disabled) return e.which != 13;
    });                 

    return function(flag){
        disabled = (flag !== undefined) ? flag : true;
    }
}();    

Answer 8

Si vous souhaitez cibler tous les champs contentEditable, utilisez

$('[contenteditable]').keypress(function(e){ return e.which != 13; });

Answer 9

Je suis venu ici à la recherche de la même réponse et j'ai été surpris de constater que c'était une solution assez simple, utilisant la solution éprouvée Event.preventDefault ()

const input = document.getElementById('input');

input.addEventListener('keypress', (e) => {
  if (e.which === 13) e.preventDefault();
});

<div contenteditable="true" id="input">
  You can edit me, just click on me and start typing.
  However, you can't add any line breaks by pressing enter.
</div>

Answer 10

Utiliser CSS:

word-break: break-all;

Pour moi, ça marche!