web-dev-qa-db-fra.com

Empêcher les sauts de ligne / paragraphe dans le contenu Modifiable

Lors de l'utilisation de 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 Maj + Entrée?

javascriptfirefoxcontenteditable
45
Daniel Cassidy

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

Cela désactivera complètement/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 retournera faux et annulera l'événement de pression de touche en entrant.

64
kamens

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. En outre, vous voudrez peut-être utiliser "clé" au lieu de "qui": https://developer.mozilla.org/en-US/docs/Web/Events/keypress

Mise à jour, car keypress est obsolète: 

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

Ajoutez la règle CSS suivante à hide sauts de ligne. Ce n'est qu'un paramètre de style, vous devez ajouter des gestionnaires d'événements à empêcher insérer des sauts de ligne:

.your_editable br {
    display: none
}
17
frogatto

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

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

une autre option consiste à autoriser la saisie des pauses mais à les supprimer sur flou. cela a l'avantage de traiter le contenu collé. vos utilisateurs vont l'adorer ou le détester (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>
6
amwinter

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 votre style de texte collé).

Le code ci-dessous couvre tout cela.

  • 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 un exemple en direct

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

La solution proposée par Kamens ne fonctionne pas dans Opera, vous devez plutôt attacher 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;
    }
}();
3
user42507

Si vous souhaitez cibler tous les champs contentEditable, utilisez

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

Je suis venu ici à la recherche de la même réponse, et j'ai été surpris de constater que c'était une solution plutôt simple, en utilisant la méthode é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>
1
AnonymousSB

Ajouter:

display: flex;

Sur l'élément html contenteditable

0
adir kandel