Bei Klick jetzigen Text durch <input> ersetzen?

multimolti

multimolti

Erfahrenes Mitglied
Hallo!

Ich bastel mir gerade einen MySQL Manager mit PHP. Man kann schon schön Tabellen anzeigen und neue Datensätze hinzufügen, aber alte bearbeiten geht noch nicht. Jetzt möchte ich, das wenn ich auf einen Wert klicke, dort anstatt dem Wert ein <input>-Feld ist, indem der jetzige Wert ist, und dahinter ein "Speichern" Button. Das mit dem Button ist soweit kein Problem, habe dafür eine Funktion:
Javascript: 
function TextAnzeigen(das)
{
	if(document.getElementById(das).style.display==\'none\') 
   		document.getElementById(das).style.display=\'block\'; 
	else document.getElementById(das).style.display=\'none\';
}
Aber ich weiß nicht, wie ich schon vorhandenen Text ersetzen kann, bin nicht wirklich erfahren mit JS. Kann mir jemand einen Tipp/eine Funktion/einen Suchbegriff geben, hab bisher nichts gefunden!

Danke
 
Du könntest etwas in der Art machen, um den Text durch ein Input-Feld zu ersetzen:

Javascript: 
<script>
function toggle_text(obj) {
  var i = 0;
  var obj2 = null;
  var nextobj = obj.nextSibling;
  while(i<15) {
    if(nextobj != null && nextobj.nodeName == "INPUT") {
      obj2 = nextobj;
      break;
    }
    nextobj = nextobj.nextSibling;
    i++;
  }
  obj.style.display = "none";
  obj2.style.display = "";
  obj2.value = obj.innerHTML;
  
}
</script>

HTML: 
<p id="text" onclick="toggle_text(this)" style="margin:0px;">Das ist der Text...</p>
<input type="text" id="textfeld" style="display:none; margin:0px;">

Ich hoffe, ich konnte dir helfen.
MoC
 
Zuletzt bearbeitet von einem Moderator:
Soo, doch noch mal eine Frage:
Jetzt möchte ich noch einen Abbrechen-Button einbauen, der die in <input>-Felder umgewandelten Texte wieder zurück in Texte umwandelt. Habe den einfach mal mit
onClick="toggle_text(document.getElementsByTagName("input"))
geladen, das geht leider nicht. Liegt das daran, das ich der Funktion jetzt ein Array übergebe, die aber nur mit Objekten arbeiten kann? Oder kann die das gar nicht rückgängig togglen?

Brauche eure Hilfe!

Habs so versucht, aber das will nicht:
Javascript: 
function Abbrechen(allefelder)
{
	for (var i=0; i<allefelder.length; i++) 
	{
		toggle_text(allefelder[i]);
	}
}
 
Zuletzt bearbeitet:
Für das Zurückverwandeln brauchen wir eine völlig neue Funktion. Denn in der ursprüngliche toggle_text(obj) wird mit der Eigenschaft .nextSibling solange nach INPUT-Elementen gesucht, bis eins gefunden wird. Dieses wird dann sichtbar und das ursprüngliche P-Element unsichtbar gemacht.

Nun liegen für das Zurücktogglen die Ziel-Elemente (<p>) aber vor und nicht nach dem Ursprungselement (<input>). Die Suche wird deshalb für jedes Element rückwärts durchgeführt - mit der Eigenschaft .previousSibling. Wiederum suchen wir solange nach P-Elementen vor dem Input-Element bis bwir eins finden, und die Sichtbarkeit tauschen. Es ergibt sich also folgende Funktion für das "Zurückverwandeln":
Javascript: 
function toggle_back() { // verwandelt ALLE <input>-Felder zurück
	var inputs = document.getElementsByTagName("input");
	for(var i=0;i<inputs.length;i++) {  // Für jedes Input auf der ganzen Seite
		if(inputs[i].type != "text")  // (edit) verhindert, dass auch andere Input-
			continue;                   // Elemente wie Buttons entfernt werden
		var obj = inputs[i];
		var j = 0;
		var obj2 = null;
		var lastobj = obj.previousSibling;
		while(j<15) {
			if(lastobj != null && lastobj.nodeName == "P") {
				obj2 = lastobj;
				break;
			}
			lastobj = lastobj.previousSibling;
			j++;
		}
		obj.style.display = "none";  // Input wird ausgeblendet
		obj2.style.display = "";     // P-Element wird wieder eingeblendet
	}
}
Das HTML-Dokument könnte so aussehen:
HTML: 
<p id="text" onclick="toggle_text(this)" style="margin:0px;">Das ist der Text...</p>
<input type="text" id="textfeld" style="display:none; margin:0px;">
<br><br>
<a href="" onclick="toggle_back(); return false;">Alle Felder "zurücktogglen"</a>

Ich hoffe, das beantwortet deine Frage
Master of Chess
 
Zuletzt bearbeitet von einem Moderator:
Klappt irgendwie nicht, weiß auch nicht warum. Hab diesen Button:
<input type="button" value="Abbrechen" onClick="toggle_back()">
aber es passiert nichts. Weil Javascript keine Fehler ausgibt, kann ich leider auch nicht sagen warum es nicht geht.

Noch ein paar Fragen:
1. Gibt es irgendein Tool, mit dem man sehen kann, warum ein JS Script nicht funktioniert?
2. Sucht diese Funktion (document.getElementsByTagName("input")) alle Inputs im ganzen HTML-Dokument oder nur in der aktuellen <form>? Weil wenn es die im ganzen Dokument nehmen würde, wären auch meine anderen weg.
3. Warum hier while(j<15) die 15? Woher kommt die, ist die willkürlich festgelegt oder wie kommt man auf den Wert?
 
Funktioniert es denn, wenn du den Link im Beispiel nimmst? Bei mir funktioniert es mit IE und Firefox...

zu 1: Ja, für Firefox gibt's zum Beispiel "Firebug"
zu 2: Die Funktion sucht alle Input auf der Seite, aber sie werden nur entfernt, wenn auch ein P-Element gefunden wird.
zu 3: Da JS ja eigentlich nicht weiß, welche Input- und P-Element zusammengehören, sucht das Skript die am nächsten zusammenliegenden. Die 15 bedeutet, dass das jeweils zugehörige Objekt maximal 15 Elemente im Objektbaum entfernt sein darf. Wenn es nämlich weiter weg ist, ist es unwahrscheinlich, dass wirklich dieses Objekt gemeint ist. Mann könnte aber auch einen anderen Wert (z.B. 10) nehmen.

Schönen Tag noch
Master of Chess
 
Ok, Firebug habe ich, 2. ist gut und 3. ergibt Sinn.

Wenn ich den Link aus dem Beispiel nehme, geht es, also ich sage jetzt mal: es geht soweit, das wenn man klickt, die <p>-Felder wieder angezeigt werden. Aber dazu nimmt der nicht die JS-Funktion, sondern läd durch das href="" einfach die Seite neu, und dann sind ja alle <input>-Felder wieder weg. Also ist so auch eine Methode, zwar nicht die, die ich wollte, aber es funktioniert ja.
 
Du musst darauf achten, dass wie im Beispiel nach dem toggle_back(); noch ein return false; kommt! Dann wird der Link nicht ausgeführt!
 
Das return false steht da, ich habe exakt dies da stehen:
HTML: 
<a href="" onclick="toggle_back(); return false;">Abbrechen</a>
und trotzdem läd er die Seite neu!

Und mit
HTML: 
<a href="javascript:toggle_back();">Abbrechen</a>
geht es leider auch nicht (also es passiert gar nichts)!
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück