Contenteditable fügt a wenn ich die Leertaste drücke

Lesezeit: 4 Minuten

Jordanien

Ich bin mir nicht sicher warum, aber wenn Sie ein Element mit aktiviertem contenteditable haben, wird bei der ersten Eingabe eines Leerzeichens ein angehängt   Tag in das Element ein. Wenn das Element standardmäßig ein Leerzeichen enthält (this is a test), wird es in Ordnung sein, aber sobald der Benutzer diese Leertaste drückt (oder sogar ein Leerzeichen kopiert und einfügt), fügt Firefox ein   zum .

Hat jemand eine Idee warum oder eine einfache Lösung? Dies ist das erste Mal, dass ich mit contenteditable spiele, also ist vieles davon neu für mich. Im Moment benutze ich nur $('br').remove() was zu funktionieren scheint, aber ich hätte gerne eine Erklärung und einen geeigneten Weg, dies zu verhindern, wenn jemand es weiß.

Ist das noch reproduzierbar? Ich habe noch nie einen solchen Fehler in FF erlebt

– Jakow L

30. Juli 2016 um 14:34 Uhr
Ich habe das gleiche Problem, jsbin.com/xarirotali/edit?html,css,Ausgabe Drücken Sie zwei Leerzeichen am Ende von „etwas Text“ und überprüfen Sie das p-Element in FF, und es wird ein
hinzugefügt.

– Jonathan Andersson

1. November 2016 um 13:36 Uhr
Eine Möglichkeit, dieses Problem zu lösen, indem Unterbrechungen in Inhaltsbearbeitungsdateien mit CSS ausgeblendet werden: p[contenteditable="true"] br {display:none;} Dadurch wird jedoch auch verhindert, dass der Wagenrücklauf in eine neue Zeile verschoben wird.

– jla

20. Oktober 2018 um 8:11 Uhr
@jla das hat mein Problem gelöst, danke.

– Wütender Roter Panda

17. November 2018 um 14:05 Uhr

Ich bin heute darauf gestoßen und weiß auch nicht, warum Firefox das tut. Ich habe es so gehandhabt.

function zapTrailingLinebreak (editableNode) {
    let children = Array.from(editableNode.childNodes)

    children.forEach(child => {
        if (children.indexOf(child) == children.length - 1) {
            if (child.tagName && child.tagName === "BR") {
                editableNode.removeChild(child)
            }
        } 
    })
}

nutzlose Iteration für Kinder, wenn alles, was Sie wollen, das letzte ist  : [...editableNode.childNodes].pop().tagName == "BR" überprüft, ob das letzte Kind a ist  . Sie müssen diese Logik um einige Überprüfungen erweitern. Das Problem besteht darin, zwischen einem gewollten zu unterscheiden   und unerwünschte.

– vsync

23. Juli 2020 um 10:42 Uhr
Es ist nicht “nutzlos”, wenn es funktioniert. Das Wort, das Sie meinten, war “unnötig”. Danke für den Tipp.

– Scott Martin

23. Juli 2020 um 14:15 Uhr
Ja, “unnötig”, sorry, in meiner Sprache bedeutet es identisch 🙂 Sie könnten tausend untergeordnete Knoten haben und es besteht keine Notwendigkeit, sie alle zu iterieren

– vsync

23. Juli 2020 um 14:18 Uhr
Ja, viel besser auf jeden Fall, ich erinnere mich, dass ich mit diesem Code nicht sehr glücklich war, als ich ihn schrieb, aber ich kannte keinen kompakten Weg. ChildNodes zu verteilen, anstatt zu iterieren, ist ein kluger Schachzug, der mir nicht eingefallen ist. Prost.

– Scott Martin

23. Juli 2020 um 16:29 Uhr

Luftig

Sie können zusätzliche entfernen BR Tag am Ende von this

let lastTag = document.querySelector('#yourDiv').lastElementChild;
if(lastTag && lastTag.tagName == "BR") lastTag.remove();

Scott Messinger

ich benutze preventDefault wenn der Benutzer einen Wagenrücklauf macht. Vielleicht könnten Sie es ändern, um ein normales Leerzeichen zurückzugeben, wenn der Benutzer die Leertaste verwendet.

if(e.keyCode==13 && e.shiftKey){ //enter && shift
    e.preventDefault(); //Prevent default browser behavior
    //this.html(this.html+"<br>");
}
if(e.keyCode==13){ //enter
    e.preventDefault(); //Prevent default browser behavior
}

Ich habe diese Methode ausprobiert, aber Chrome gibt mir diesen Fehler: Uncaught ReferenceError: e is not defined. Weißt du, warum?

– Tri Nguyen

1. Februar 2013 um 2:32 Uhr
Sie können Firefox nicht daran hindern,
mit e.preventDefault() anzuhängen.

– Rejôme

7. Dezember 2014 um 20:48 Uhr
herabgestimmt, weil dies die Frage nicht beantwortet. Die Frage war spezifisch für Firefox, das a hinzufügt   beim Drücken Platz nicht eintreten/zurückkehren.

– MushinNoShin

10. Januar 2016 um 16:58 Uhr
@MushinNoShin Versuche meine Antwort noch einmal zu lesen. Ich erwähne, wie das Beispiel an den in der Frage genannten Anwendungsfall angepasst werden könnte.

– Scott Messinger

29. Juni 2016 um 23:42 Uhr
@ScottMessinger Fairer Punkt, mein Fehler, dass ich den vergangenen Text zu schnell gelesen habe. Dieser Vorschlag würde immer noch nicht funktionieren, wenn Leerzeichen eingefügt werden.

– MushinNoShin

30. Juni 2016 um 21:01 Uhr

Das geht ganz einfach mit CSS

HTML

<span id="amt" contenteditable="true">100000</span>

CSS

span#amt br {
    display: none;
}

14045400cookie-checkContenteditable fügt a wenn ich die Leertaste drücke

#Abfrage #Inhalt editierbar #Javascript