JS mit Entertaste Absenden anstatt Button

[portseven]

hallo,

habe hier eine Funktion wo ich per Entertaste den Beitrag absenden kann. Problem ist er funktioniert nicht bei einer Textarea. Woran liegt es? Wenn ich anstatt Textarea Input type="text" nehme funktioniert es. Brauche es aber für Textarea

JS

<script LANGUAGE="javascript"> function send() { document.theform.submit() } </script>

HTML:

				<form action="" method="POST" id="theform" name="theform">
					<textarea name="send_msg" onunfocus="send()" placeholder="Schreibe etwas..."></textarea>
				</div>

[Matthias Apsel]

Hallo portseven,

<script LANGUAGE="javascript">
	function send() {
		document.theform.submit()
	}
</script>

Das language-Attribut ist nicht sinnvoll (und war es wahrscheinlich noch nie).

	<form action="" method="POST" id="theform" name="theform">
		<textarea name="send_msg" onunfocus="send()" placeholder="Schreibe etwas..."></textarea>
	</div>

Dein HTML ist kaputt.

habe hier eine Funktion wo ich per Entertaste den Beitrag absenden kann.

onunfocus ist nicht gleichbedeutend mit dem Drücken der Entertaste. Verwende besser keine on-Attribute.

Bei einem einzeiligen Texteingabefeld kann man keine Zeilenumbrüche einfügen.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@portseven

Wenn ich anstatt Textarea Input type="text" nehme funktioniert es.

Nein, das kann gar nicht funktionieren.

<textarea name="send_msg" onunfocus="send()" placeholder="Schreibe etwas..."></textarea>

1. Es gibt kein unfocus-Event. send() wird nie aufgerufen.

2. Du kannst mit JavaScript die Interaktionen auf einer Seite verbessern (progressive enhancement). Du solltest aber nicht JavaScript für das Funktionieren einer Seite voraussetzen. (Übrigens auch bei single page applications nicht.)

3. Das Eingabefeld hat keine Beschriftung (label). Muss es aber haben; Placeholder sind kein Ersatz für Labels! – Wirklich nicht!

LLAP 🖖

[Rolf B]

Hallo portseven,

um der Antwort "Wieso kaputt, funktioniert doch?!" mal vorwegzukommen:

• Das HTML ist kaputt weil man ein <form> Element nicht mit </div> beendet.
• Das Script ist konzeptionell kaputt, weil der JavaScript-Helper das Form submitten möchte, sobald das Input-Element den Fokus verliert. Das passiert bei Drücken der TAB Taste oder beim Klick mit der Maus an eine andere Stelle, und es ist etwas ganz anderes als die Enter-Taste
• Die send-Funktion ist kaputt, weil Elemente mit id auf dem Window-Objekt als globale Variable bereitgestellt werden, nicht auf dem Dokument. Wenn Dokument, dann document.forms.theform. window.theform funktioniert auch, aber nur, weil die Microsofties uns das in den Browser-Kriegen eingebrockt habe, uns den globalen Namespace damit vermüllen und die anderen Browserhersteller der lieben Kompatibilität wegen mitgezogen sind. Es ist leider zu verbreitet, als dass die Hersteller das entfernen könnten, und mittlerweile sogar in der HTML5 Spec angekommen (ächz!), aber MACHEN muss man es nicht. Und document.theform funktioniert definitiv gar nicht.
• Die Event-Registrierung ist kaputt, weil man heute zum einen nicht mehr mit on-Attributen registriert, und zum anderen derjenige, von dem Du es kopiert hast, nicht recht informiert ist. Es gibt kein unfocus Event. Es heißt blur. Die send()-Funktion wird also nie aktiv, was nichts schadet, weil sie ja sowieso nicht funktionieren würde.

Und warum funktioniert es scheinbar? Weil ein Form mit der ENTER Taste vom Browser automatisch abgeschickt wird. Nur nicht in der Textarea. Weil ENTER da einen Zeilenumbruch auslöst. Und das sollte auch so bleiben, es gibt nichts übleres als vertraute Eingabeelemente, die sich unvertraut verhalten.

Wenn Du einen Hotkey zum Abschicken des Forms haben willst, dann solltest Du dafür eine Tastenkombination wählen, die der ENTER-Taste ähnlich ist. Z.B. Strg+Enter.

Um das zu bauen:

• registriere mit addEventListener einen DOMContentReady Eventhandler
• darin registrierst Du einen keypress-Handler auf dem Form
• in diesem keypress-Handler prüfst Du, ob Ctrl gedrückt wurde und ob die Taste 'Enter' oder 'NumpadEnter' ist. Wenn ja, schickst Du das Form ab.

Die dazu nötigen Informationen findest Du in unserem Wiki. Viel Erfolg!

Rolf