Bei Klick jetzigen Text durch <input> ersetzen?

Hmm, also ich poste jetzt einfach mal einen Teil des ausgegebenen Quellcodes, dann kannst du den mal kopieren und sehen woran der Fehler liegt:

HTML: 
<form name="tabelle" action="" method="post">
<table border="0"><tbody>
<tr>
  <td><input type="checkbox" name="Datensatz[]" value="37"></td>
  <td><p id="text" onclick="toggle_text(this)" style="margin:0px;">37</p>  <input type="text" name="aendernfeld_name[]" value="37"   	style="display:none; margin:0px;">
  <input type="hidden" name="aendernfeld_name_id[]" id="textfeld" value="37">
  </td>  <td><p id="text" onclick="toggle_text(this)" style="margin:0px;">Admin</p>  <input type="text" name="aendernfeld_name[]" value="Admin"   	style="display:none; margin:0px;">
  <input type="hidden" name="aendernfeld_name_id[]" id="textfeld" value="37">
  </td>  <td><p id="text" onclick="toggle_text(this)" style="margin:0px;">1</p>  <input type="text" name="aendernfeld_name[]" value="1"   	style="display:none; margin:0px;">

  <input type="hidden" name="aendernfeld_name_id[]" id="textfeld" value="37">
  </td>  <td><p id="text" onclick="toggle_text(this)" style="margin:0px;">Admin</p>  <input type="text" name="aendernfeld_name[]" value="Admin"   	style="display:none; margin:0px;">
  <input type="hidden" name="aendernfeld_name_id[]" id="textfeld" value="37">
  </td>
</tr>
</tbody></table>
<input type="submit" name="aendern" value="Änderungen speichern">
<input type="button" name="abbrechen" value="Abbrechen" onClick="toggle_back()">
<a href="javascript:toggle_back();">Abbrechen</a></form>

und noch mal das Javascript:
Javascript: 
function toggle_back()
{
	var inputs = document.getElementsByTagName("input");
	for(var i=0;i<inputs.length;i++)
	{
		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
	}
}
 
Hier eine Nur-JavaScript-Variante:
HTML: 
<script type="text/javascript" charset="utf-8">
window.onload = function() {
	var elems = document.getElementsByTagName("*");
	for( var i=0; i<elems.length; i++ ) {
		if( !elems[i].className.match(/(?:^|\s+)editable\(([A-Za-z][A-Za-z0-9-_:.]+)\)(?:\s+|$)/) ) {
			continue;
		}
		elems[i].ondblclick = new Function("startEditing(this, '"+RegExp.$1+"')");
	}
}
	function startEditing( obj, name )
	{
		var input = document.createElement("input");
		input.type = "text";
		input.name = name;
		input.value = obj.firstChild.nodeValue;
		input.onblur = new Function("stopEditing(this.parentNode)");
		obj.ondblclick = null;
		obj.replaceChild(input, obj.firstChild);
		input.focus();
	}
	function stopEditing( obj )
	{
		var text = document.createTextNode(obj.firstChild.value);
		obj.ondblclick = new Function("startEditing(this, '"+obj.firstChild.name+"')");
		obj.replaceChild(text, obj.firstChild);
	}
</script>

<p class="editable(foobar)">foobar</p>
 
Das ist natürlich die beste Lösung.

@multimolti: Könnte es daran liegen, dass mehrere Elementer bei dir die selbe ID haben? IDs müssen im ganzen Dokument einmalig sein.
 
Habe das mal versucht, aber da passiert einfach gar nichts. Was sollte denn passieren? Soll sich das wieder in eine Input-Feld verwandeln oder was?

Master of Chess hat gesagt.:
Das ist natürlich die beste Lösung.

@multimolti: Könnte es daran liegen, dass mehrere Elementer bei dir die selbe ID haben? IDs müssen im ganzen Dokument einmalig sein.
Zum Vergrößern anklicken....
Ja, es haben viele Elemente die gleiche ID, aber die ist nur drin, weil das in dem Post vorher auch gemacht war. Ich kann die einfach rausnehmen, ich brauche die nicht. Und warum dürfen die nur einmalig sein? Wenn ich mit CSS etwas formatiere, dann kann ich das ja auch über die class oder die id zuweisen, und da benutze ich die id mehrmals!

EDIT:
Mein Firebug sagt bei jedem klick auf den Abbrechen-Button:
"lastobj has no properties, [Break on this error] lastobj = lastobj.previousSibling;"
 
IDs dürfen nur einmalig sein, da das die Regeln und Definitionen von HTML so vorschreiben!! Welches Objekt sollte sonst denn auch die Funktion getElementById zurückliefern? Es heißt ja auch nicht getElementsById(). Wenn du bei CSS mehrere identische IDs verwendest, ist das genauso falsch - dafür ist das Attribut class gedacht. Und wie man sieht, verursacht das mehrfache Verwenden von IDs durchaus Fehler und sollte somit auf jeden Fall vermieden werden.

Schönen Tag noch
Master of Chess
 
Gumbo hat gesagt.:
Hier eine Nur-JavaScript-Variante:
HTML: 
<script type="text/javascript" charset="utf-8">
window.onload = function() {
	var elems = document.getElementsByTagName("*");

[snip snap] ^^

function startEditing( obj, name )
	{
		var input = document.createElement("input");
		input.type = "text";
		input.name = name;
		input.value = obj.firstChild.nodeValue;
		input.onblur = new Function("stopEditing(this.parentNode)");
		obj.ondblclick = null;
		obj.replaceChild(input, obj.firstChild);
		input.focus();
	}

[snap snip] ^^

	}
</script>

<p class="editable(foobar)">foobar</p>
Zum Vergrößern anklicken....

Der Beitrag ist nun zwar schon etwas länger her, aber ich suche seit fast einer Woche nach einer Lösung für mein Problem, wo ich nicht weiter kam und fand sie in dem Vorschlag von Gumbo. Danke an dieser Stelle ;o)

Nun geht's weiter mit meinen Problemen:

Mit der Funktion kreiere ich zwar Inputfelder aber ich habe selbst bei selfhtml nichts gefunden, womit ich die beiden Attribute size und maxlength für die Inputfelder, respektive cols & rows für Textarea, definiere. :o(
...oder diesen wenigstens eine CSS-Klasse zuweisen.

Um zwischen Inputfeldern und Textareas zu unterscheiden - ich möchte gern beide nutzen - macht sich eine erweiterte RegExp im Klassennamen, die bspw. den letzten Buchstaben abfragt, welcher Input und Textarea definiert, am sinnvollsten, oder gibt's da noch eine einfachere Variante?

Grüße,
Shawnie
 
coder shawnie hat gesagt.:
Mit der Funktion kreiere ich zwar Inputfelder aber ich habe selbst bei selfhtml nichts gefunden, womit ich die beiden Attribute size und maxlength für die Inputfelder, respektive cols & rows für Textarea, definiere. :o(
...oder diesen wenigstens eine CSS-Klasse zuweisen.
Zum Vergrößern anklicken....

Attribute kannst du per setAttribute() zuweisen:
Code: 
input.setAttribute('size',40)

Mit dem class-Attribut geht das theoretisch genauso, da es dort aber ein paar Unterschiede in den Browsern gibt, tu es besser so:
Code: 
input.className='Klassenname'
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück