Diskussion:Websiteentwicklung: JavaScript: HTML-Objekte

Möglichkeiten der Texteingabe

Letzter Kommentar: vor 14 Jahren6 Kommentare2 Personen sind an der Diskussion beteiligt

Frage von einer JavaScript-Anfängerin, die mir auch nach dem (vielleicht etwas zu planlosen) Stöbern in diesem Buch noch unbeantwortet geblieben ist: Welche Möglichkeiten bietet JavaScript überhaupt, den Benutzer Text (oder andere Informationen) eintippen zu lassen, den das Programm anschließend als Variable nutzt? Ich vermisse eine Übersicht. Bisher weiß ich nur:

window.prompt()
Formular im HTML-Dokument (mit <form>-Tags)

Gibt es noch weitere Möglichkeiten? Mir fehlt besonders ein temporäres Eingabefeld, das im HTML-Dokument (also nicht als Pop-Up-Fenster wie beim prompt-Befehl) erscheint und das man nach Eingabe des Textes wieder verschwinden lassen kann, ohne dass extra ein Formular definiert werden muss. (In der Steinzeit, als Leute noch mit Turbo Pascal programmiert haben, gab es für so etwas z.B. einen read-Befehl.) --Stilfehler 14:16, 26. Aug. 2010 (CEST)Beantworten

Das dürfte so in die Richtung gehen: http://de.selfhtml.org/javascript/sprache/anzeige/alertthis.htm (Der "zurück"-Link führt zur Erläuterung). Eingabefeld, das nur über Buttondruck ausgelesen wird, also ohne <form>. Das Eingabefeld erst bei Drücken eines anderen Buttons oder eines anderen Events erscheinen zu lassen, wird trivial sein. Habe aber selbst kaum von JS. --84.130.26.141 14:32, 26. Aug. 2010 (CEST)Beantworten

Ich seh' gerade, form-Tags sind ja doch drumherum. Naja, was spricht dagegen. --84.130.26.141 14:36, 26. Aug. 2010 (CEST)Beantworten

Danke für diese superschnelle Antwort! Ich werde es mir gleich einmal ansehen, habe aber weiterhin ein Bookmark auf dieser Seite, falls dir/euch noch mehr einfällt. Die Lösung, nach der ich suche, lässt sich vollständig in einem .js-file unterbringen und spielt in der Gestaltung des HTML-Dokuments keine Rolle. Form-Tags sind da, soweit meine Anfängerkenntnisse reichen, vielleicht ein Problem. --Stilfehler 14:39, 26. Aug. 2010 (CEST)Beantworten

Hilft dir vielleicht nicht so unbedingt weiter, aber trotzdem... Ich lese gerade seit 3, 4 Tagen "jQuery in Action", hab' eigentlich gar nichts am Hut mit Web-Programmierung (mit "richtiger" Programmierung schon), bin aber schwer begeistert, wie einfach das so ist mit einem JS-Framework a la jQuery.

Das Folgende ist nur eine html-Seite mit einem einzigen Button am Anfang und einem noch leeren div-Tag. Bei Klick verschwindet der Button und ein Editfeld samt Ok-Button wird in dem leeren div-Tag erzeugt, inkl. Event-Handling für den neuen Button. Bei Klick auf den Ok-Button wird der eingegebene Text angezeit, die Eingabemöglichkeit wieder gelöscht und der ursprüngliche Button wieder eingeblendet.

<!DOCTYPE html>
<html>
<head>
	<TITLE>Foo</TITLE>
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript">

	$(function() {
	
		$("#but_einblenden").click(function() {
			$("#but_einblenden").hide()    // Einblende-Button ausblenden
			// Eingabefeld und Button in leeres <div>-Tag einfügen
			$("#eingabe").html('<input id="eingabefeld"></input><button type="button" id="but_ok">OK</button>');   
			$("#but_ok").click(function() {  // Bei Druck auf den Ok-Button
				alert($("#eingabefeld").val())   // Anzeige des eingegebenen Textes
				$("#eingabe").html('')    // Eingabemöglichkeit löschen (gibt sicherlich auch eine Löschfunktion)
				$("#but_einblenden").show()    // Einblende-Button wieder einblenden
			});
		});
	});
	
	</script>
</head>
		
<body>
	<button type="button" id="but_einblenden">Eingabefeld einblenden</button>
	<div id="eingabe"></div>
</body>
</html>

Wenn es mit jQuery geht, geht es natürlich auch mit purem JS. --84.130.26.141 15:37, 26. Aug. 2010 (CEST)Beantworten

Danke, das sind gute Tipps, ich werde mir alles einmal ansehen. --Stilfehler 17:24, 26. Aug. 2010 (CEST)Beantworten