[FRAGE] Kommentar: Kein Zeilenumbruch beim Abschicken durch Enter

[Lincolm]

Hallo Leute,

das ist das erste Mal, dass ich versuche über ein Forum-Post Hilfe zu bekommen, da ich mich sonst immer sehr gut mit meinem Freund und Helfer Google durch das Netz schlagen konnte. Dieses Mal habe ich allerdings ein kleines Problem, bei dem mir Google nicht mehr weiter hilft. Folgendes Szenario:

Ich möchte dem User meiner Seite die Möglichkeit bieten Inhalte zu kommentieren. Das ganze soll ähnlich wie beispielsweise bei Facebook sein. Man kann den Kommentar durch drücken der Enter-Taste direkt abschicken. Soweit kein größeres Problem, wäre da nicht ein kleines Hindernis, oder besser ein Bug. In meinem Code-Beispiel kann man sehen, dass eine Funktion namens "postComment()" aufgerufen wird. Hierbei wird eine PHP-Datei geladen, die den Kommentar in der Datenbank abspeichert und anschließend ohne die Seite neu zu laden anzeigt.

Mein Problem ist es jetzt folgendes:
Wenn der User Enter drückt, wird vor dem Absenden noch ein Zeilenumbruch an den Text angehängt, oder wenn man sich mit dem Cursor mitten im Text befindet, an der jeweiligen Stelle positioniert. Vorerst hatte ich das ganze so geregelt, dass das letzte Zeichen gelöscht wird und somit der Zeilenumbruch weg ist. Schreibt man nun aber einen Text und drückt mit dem Cursor mitten drin Enter, wird eben mitten im Text ein Zeilenumbruch eingefügt und das letzte Zeichen dennoch gelöscht.

Ich würde mich natürlich sehr über eine Lösung freuen. Da meine JS-Kenntnisse wirklich nicht gerade die besten sind, fällt mir selbst keine attraktive Lösung ein.

Sollte diese Frage bereits geklärt worden sein, tut es mir Leid, ich habe beim Durchsuchen des Forums leider keine Lösung für mein Problem gefunden.

Beste Grüße,
Linc'

Für Code-Beispiel HIER klicken

EDIT:
Um meine Frage nochmal zu konkretisieren:
Gibt es mittels Java-Script eine Möglichkeit den entstehenden Zeilenumbruch zu löschen, oder gar zu verhindern?

 

[j-l-n]

Gibt es mittels Java-Script eine Möglichkeit den entstehenden Zeilenumbruch zu löschen, oder gar zu verhindern?

Folgendes entfernt dir alle Wagenrückläufe, Zeilenumbrüche, etc. aus einem String:

if (e.which == 13 && ! e.shiftKey) {
    var text = this.value;
    var von_zeilenumbruch_bereinigt = text.replace(/\r|\n/g, " "); 
    this.value = "";
    postComment(text)
}

(ungetestet!)

 

[s4ty]

Nutze doch e.preventDefault() um in dem Fall das Event daran zu hindern zu reagieren.

Edit fiddle - JSFiddle

 

[Lincolm]

Hallo Julian,

vielen Dank für die schnelle Antwort! Das ist natürlich richtig. Aber dadurch würde ich dem User jede Möglichkeit nehmen einen Zeilenumbruch zu schreiben! Der soll ja an sich schon möglich sein. Durch drücken der Tastenkombination "SHIFT + ENTER" wird der Text ja nicht direkt abgeschickt. (Siehe Code-Schnipsel "&& ! e.shiftKey")

Wenn alle Stränge reißen, wäre dies natürlich eine alternative Lösung.

Beste Grüße,
Linc'

 

[j-l-n]

Das ist natürlich richtig. Aber dadurch würde ich dem User jede Möglichkeit nehmen einen Zeilenumbruch zu schreiben! Der soll ja an sich schon möglich sein. Durch drücken der Tastenkombination "SHIFT + ENTER" wird der Text ja nicht direkt abgeschickt.

Sorry, stimmt; hab ich leider übersehen. Dann schau dir doch besser mal den Tipp von s4ty an!

 

[Lincolm]

Hallo s4ty,

das ist schon mal ein sehr guter Ansatz, leider funktioniert es nicht ganz, wenn ich den Code vom Code-Beispiel noch hinzufüge. Um ehrlich zu sein habe ich aber keine Ahnung warum. Wenn du mal einen Text schreibst und mitten im Text Enter drückst, siehst du, dass er vorher dennoch einen Zeilenumbruch einfügt. 'Ne Idee wie ich da ran gehen soll?

Code-Beispiel

Beste Grüße,
Linc'

 

[j-l-n]

Wenn du mal einen Text schreibst und mitten im Text Enter drückst, siehst du, dass er vorher dennoch einen Zeilenumbruch einfügt. 'Ne Idee wie ich da ran gehen soll?

Probiere mal bei Absenden an die Funktion ein

return false;

hinzuzufügen.
Das verhindert beispielsweise auch bei Links, dass dem Verweisziel gefolgt wird, wenn eine JS-Funktion aufgerufen wird.

 

[Lincolm]

Danke Julian,

aber leider auch keine Änderung im Ergebnis.. Bin mir allerdings nicht sicher, ob ich's an die richtige Stelle gesetzt habe. x)

Code-Beispiel

Beste Grüße,
Linc'

 

[mikdoe]

Ich verstehe das letzte Fiddle nicht so ganz. Keine <form>, kein Ajax Request, garnichts??
Von kkapsner habe ich mal diese Lösung bekommen, die bei mir wunderbar überall läuft:

function tastenpruefung(ev,aufruf) {
	var key = (ev.which) ? ev.which : ev.keyCode;
	if (key == 13) {
		if (ev.preventDefault){
			ev.preventDefault();	// verhindert das absenden eines umspannenden <form>
		}
		else {
			ev.returnValue = false;	// IE8
		}
		aufruf();
	}
}

Einbindung:

var func = function() {
        alert('Guten Tag! Und hier nun der Code, der bei Enter ausgeführt wird, anstatt ein Formular abzuschicken');
};
inpfeld.onkeydown = function(e) { tastenpruefung(e || event,func); };

 

[Lincolm]

Hallo mikdoe,

vielen Dank für die Antwort. Ich habe versucht das ganze auf meinen Code anzuwenden, bin aber offensichtlich noch schlechter in Javascript, als ich es dachte. x) Selbst wenn ich die Prüfung mit preventDefault() vor meinem eigentlich Ausführungs-Code anwende, wird immer noch ein Zeilenumbruch in Mitten des Textes eingefügt...

Ich verstehe das letzte Fiddle nicht so ganz. Keine <form>, kein Ajax Request, garnichts??

Ein <form>-Tag ist doch generell nicht notwendig (mindest gerade für dieses Beispiel), da sich die Ereignisse ja erstmal nur auf das Textfeld beziehen sollen. Was Ajax angeht... Da kann ich leider nichts zu sagen - wie gesagt, Javascript Noob. ^^"

Ich fand jetzt die Lösung von s4ty schon ziemlich sinnvoll. Allerdings funktioniert es nur dann, wenn ich nicht noch irgendwas nach oder vor dem preventDefault() mache.

Beste Grüße,
Linc'

Code - Beispiel

 

[mikdoe]

Also geht es nur darum, dass das Enter keinen Zeilenumbruch machen soll?

 

[kkapsner]

Da du jQuery verwendest, brauchst du das .returnValue gar nicht. Dass das letzte jsfiddle nicht funktioniert, liegt einzig alleine am alert(): Edit fiddle - JSFiddle

 

[Lincolm]

Hallo kkapsner,

wunderbar! Danke für die Info, ich fuchse mich momentan noch etwas durch Javascript durch.. Danke für die Antwort! Funktioniert einwandfrei.
Allgemein danke für eure Hilfe!

Beste Grüße,
Linc'

 

[kkapsner]

Bitte - gern geschehen.