Verhindern Sie Zeilen-/Absatzumbrüche im Inhalt. Editierbar

Lesezeit: 5 Minuten

Daniel Cassidy

Gibt es bei der Verwendung von contentEditable in Firefox eine Möglichkeit, den Benutzer daran zu hindern, Absatz- oder Zeilenumbrüche einzufügen, indem er die Eingabetaste oder Umschalt+Eingabetaste drückt?

Sie können einen Ereignishandler an das Keydown- oder Keypress-Ereignis für das contentEditable-Feld anhängen und das Ereignis abbrechen, wenn der Tastencode sich als Enter (oder Umschalt+Enter) identifiziert.

Dadurch wird die Eingabetaste/Umschalt+Eingabetaste vollständig deaktiviert, wenn der Fokus im Feld „contentEditable“ liegt.

Wenn Sie jQuery verwenden, etwa:

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

…was false zurückgibt und das Tastendruckereignis bei der Eingabe abbricht.

Beachten Sie, dass dies nicht funktioniert, wenn Sie Text mit Zeilenumbrüchen in den contentEditable-Bereich kopieren und einfügen.

– Mathias Bynens

29. Juni 2011 um 18:57
Fälle des Einfügens (aus der Zwischenablage) oder Löschens von Inhalten werden nicht abgedeckt.

– Kafoso

13. Okt. 2016 um 14:01
Es wird nützlich sein, mehrere zu verarbeiten contenteditable Elemente auf der Seite, aber nicht nur eines

– Systemneustarter

4. Mai 2020 um 6:35 Uhr
@SystemsRebooter Machen Sie es einfach für verschiedene Elemente oder verwenden Sie eine Schleife

– RixTheTyrunt

16. Dezember 2022 um 11:07 Uhr

andyrandy

Dies ist mit Vanilla JS mit dem gleichen Aufwand möglich:

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

Für die einfachsten Dinge sollten Sie jQuery nicht verwenden. Möglicherweise möchten Sie auch „key“ anstelle von „which“ verwenden: https://developer.mozilla.org/en-US/docs/Web/Events/keypress

Update, seitdem keypress ist veraltet:

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

Ich stimme zu, und FWIW: Ich habe JQuery in dem Projekt, das diese Frage aufgeworfen hat, nicht verwendet. Es ärgert mich ein wenig, dass JavaScript-Antworten auf SO normalerweise davon ausgehen, dass jeder JQuery verwendet, aber OTOH-Anfänger verwenden mit überwältigender Wahrscheinlichkeit JQuery und alle anderen sind in der Lage, die Antworten zu übersetzen, um ihre bevorzugten Bibliotheken oder deren Fehlen zu verwenden :).

– Daniel Cassidy

18. Januar 2016 um 23:22
Ich sehe es als großes Problem an, dass Anfänger immer versuchen, JQuery für alles zu verwenden. Sie lernen nicht einmal mehr wirklich Vanilla Js.

– andyrandy

19. Januar 2016 um 10:08
Jetzt keyCode ist ebenfalls veraltet, also verwenden evt.key === "Enter". Zur Abwärtskompatibilität kann ich hier nichts sagen. Dokumente.

– cbednarski

27. Juli 2019 um 17:26 Uhr
Und in der JQuery-Variante: $(“.“).keypress(function(e) { if (e.which === 13) e.preventDefault(); });

– OritK

9. September 2019 um 8:59
Es liegt ein Tippfehler vor: evt.preventDefault sollte event.preventDefault sein! Außerdem funktioniert die Lambda-Syntax nicht in jedem Browser. Dieser Code hat bei mir funktioniert: name.addEventListener( ‘keydown’, function( event ) { if ( event.keyCode === 13 ) { event.preventDefault(); } } );

– cskwg

20. Okt. 2019 um 8:45 Uhr

Frogatto

Fügen Sie die folgende CSS-Regel hinzu verstecken Zeilenumbrüche. Dies ist nur eine Stileinstellung, zu der Sie einige Event-Handler hinzufügen sollten verhindern Zeilenumbrüche einfügen:

.your_editable br {
    display: none
}

Chrome fügt einige ein <DIV>s auch, also könnte ich hinzufügen .your_editable * { display: inline } davor.

– Eugene Ryabtsev

7. Februar 2014 um 4:34
Wirklich ärgerlich

– RixTheTyrunt

6. Juni 2022 um 15:30 Uhr
Was für ein einzigartiger Ansatz. Ich hatte ein nicht damit zusammenhängendes Problem, bei dem der benutzerdefinierte Text aufgrund der Löschung des in Chrome eingefügten Zeilenumbruchs nach oben verschoben wurde. Interessanterweise löste sich das Problem von selbst, indem das Stylesheet über die Entwicklungstools aktualisiert wurde. Ich habe die Hoffnung verloren, bis ich Ihre Lösung gefunden habe. Es funktioniert jetzt.

– McRaZick

1. Dezember 2022 um 14:31 Uhr

Maor Oz

Neben dem Hinzufügen von Zeilenumbrüchen fügt der Browser auch zusätzliche Tags und Stile hinzu (wenn Sie Text einfügen, hängt der Browser auch Ihren eingefügten Textstil an).

Der folgende Code deckt alles ab.

Wenn Sie die Eingabetaste drücken, werden keine Zeilenumbrüche hinzugefügt.

Wenn Sie Text einfügen, werden alle vom Browser hinzugefügten Elemente aus dem Text entfernt.

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

Klicken Sie hier für ein Live-Beispiel

Eine andere Möglichkeit besteht darin, die Eingabe von Pausen zuzulassen, diese jedoch bei Unschärfe zu entfernen. Dies hat den Vorteil, dass mit eingefügten Inhalten umgegangen wird. Ihre Benutzer werden es entweder lieben oder hassen (abhängig von Ihren Benutzern).

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

dann in HTML:

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

Patrick Desjardins

Wenn Sie das JQuery-Framework verwenden, können Sie es mit festlegen An Methode, die Ihnen das gewünschte Verhalten für alle Elemente ermöglicht, auch wenn dieses erst kürzlich hinzugefügt wurde.

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

adir kandel

Hinzufügen:

display: flex;

Auf dem inhaltsbearbeitbaren HTML-Element

Bitte fügen Sie eine angemessene Erklärung hinzu, wie Ihre Lösung die Frage beantwortet.

– Jens

5. April 2020 um 8:09
Einfach und doch perfekt!

– David Chávez

31. Dezember 2020 um 18:56 Uhr
schön und perfekt!

– EaBengaluru

15. Juni 2021 um 11:23
Funktioniert nicht bei Verwendung von Umschalt+Eingabetaste

– Nur Mohit

1. August 2022 um 5:56
Dies funktioniert folgendermaßen: Wenn Sie in einem inhaltsbearbeitbaren Element einen Zeilenumbruch hinzufügen, umschließt der Browser Ihre Zeilen automatisch in einen div Element. Wenn die Zeile umbricht, wird ein hinzugefügt div Element automatisch, um die aktuelle neue Zeile zu beginnen. Durch die Nutzung display: flexsorgen Sie dafür, dass die DIVs im Gegensatz dazu horizontal in derselben Zeile angezeigt werden display: block die standardmäßig angewendet wird. Dies verhindert nicht das Hinzufügen neuer Zeilen. Es lässt sie einfach direkt nebeneinander erscheinen. Sie können dieses Verhalten bestätigen, indem Sie die DevTools verwenden oder auf drücken shift+enter.

– Nur Mohit

1. August 2022 um 6:01 Uhr

14525100cookie-checkVerhindern Sie Zeilen-/Absatzumbrüche im Inhalt. Editierbar

#Feuerfuchs #inhaltsbearbeitbar #Javascript