Prévenir line/sauts de paragraphe dans contentEditable

Lors de l'utilisation de contentEditable dans Firefox, il est un moyen pour empêcher l'utilisateur d'insérer le paragraphe ou des sauts de ligne en appuyant sur entrée ou maj+entrée?

InformationsquelleAutor Daniel Cassidy | 2009-01-08

64

Vous pouvez associer un gestionnaire d'événement pour la keydown ou événement keypress pour la contentEditable champ et d'annuler la manifestation si le mot de code identifie lui-même comme entrée (ou maj+entrée).

Cela va désactiver enter/maj+entrée complètement lorsque le focus se trouve dans le contentEditable champ.

Si vous utilisez jQuery, quelque chose comme:
```
$("#idContentEditable").keypress(function(e){ return e.which != 13; });
```
...qui retournera false et annuler l'événement keypress sur entrée.
- Notez que cela ne fonctionne pas lorsque le copier-coller du texte avec des sauts de ligne dans le contentEditable zone.
- Ne couvre pas le cas pour le collage (à partir du presse-papiers) ou de faire tomber le contenu.
InformationsquelleAutor kamens
22

C'est possible avec de la Vanille 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. Aussi, vous pouvez utiliser de la "clé" au lieu de "qui": https://developer.mozilla.org/en-US/docs/Web/Events/keypress

Mise à jour, depuis keypress est obsolète:
```
document.getElementById('idContentEditable').addEventListener('keydown', (event) => {
    if (event.keyCode === 13) {
        evt.preventDefault();
    }
});
```
- Je suis d'accord, et FWIW, je n'étais pas à l'aide de JQuery dans le projet qui a suscité cette question. Il ne me gênent un peu que JavaScript réponses sur DONC généralement suppose que tout le monde utilise JQuery, mais otoh, que les débutants sont extrêmement probable à l'aide de JQuery et tout le monde est capable de traduire les réponses à l'utilisation de leur choix bibliothèques ou l'absence de celui-ci :).
- je vois ça comme un gros problème que les débutants essayez toujours d'utiliser jquery pour tout. ils ne sont pas encore vraiment apprendre à la vanille js plus.
InformationsquelleAutor luschn
16

Ajouter la règle CSS suivante à cacher les sauts de ligne. Ce n'est qu'un paramètre de style, vous devez ajouter un peu de gestionnaires d'événements pour empêcher l'insertion de sauts de ligne:
```
.your_editable br {
    display: none
}
```
- Inserts Chrome certaines <DIV>s trop, donc peut ajouter .your_editable * { display: inline } avant que.
InformationsquelleAutor Hi I'm Frogatto
7

Si vous êtes à l'aide du framework JQuery, vous pouvez le définir à la sur méthode 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; 
});   
```
InformationsquelleAutor Patrick Desjardins
6

une autre option est de permettre des pauses pour être entrés, mais de les supprimer sur le flou. cela a l'avantage de traiter avec le contenu collé. vos utilisateurs seront soit on aime ou on déteste (en fonction de 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>
```
InformationsquelleAutor amwinter
5

Autres que d'ajouter des sauts de ligne, le navigateur ajoute les balises et les styles (lorsque vous collez du texte, le navigateur ajoute également votre texte collé style).

Le code ci-dessous couvre tout.
- Lorsque vous appuyez sur entrée, pas de sauts de ligne seront ajoutés.
- Lorsque vous collez du texte, tous les éléments ajoutés par le navigateur sont supprimés à partir 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 vivant
- à Partir de l'examen de la file d'attente: puis-je vous demander à s'il vous plaît ajouter un peu de contexte autour de votre code source. Code-seulement les réponses sont difficiles à comprendre. Il aidera le demandeur et les futurs lecteurs à la fois si vous pouvez ajouter plus d'informations dans votre post.
InformationsquelleAutor Maor Oz

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

Solution proposée par Kamens ne fonctionne pas à l'Opéra, vous devriez joindre à l'événement pour en lieu et place.

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

InformationsquelleAutor

2

Si vous souhaitez cibler tous les contentEditable champs de l'utilisation
```
$('[contenteditable]').keypress(function(e){ return e.which != 13; });
```
InformationsquelleAutor Terrillo Walls
1

Je suis venu ici à la recherche pour la même réponse, et a été surpris de trouver que c'est une solution assez simple, à l'aide de l'éprouvé et vrai Événement.preventDefault()

JS:
```
const input = document.getElementById('input');

input.addEventListener('keypress', (e) => {
  if (e.which === 13) e.preventDefault();
});
```
HTML:
```
<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>
```
- c'est exactement ma réponse, 3 ans avant le vôtre 😉
- Ah, c'est donc, je ne sais pas pourquoi j'ai répondu à cette question, alors, peut-être qu'il n'avait pas accepté de répondre, et je n'ai pas vu votre réponse; cependant, il existe une différence essentielle, je me suis assigné de l'élément de const pour rendre le code plus lisible #mindblowing
InformationsquelleAutor AnonymousSB
-1

Utiliser les CSS:
```
word-break: break-all;
```
Pour moi sa a fonctionné!

InformationsquelleAutor Woese TI

Vous devez vous connecter pour publier un commentaire.