Manipulation von Eingabeelementen

[Seba]

Hallo,

ich beschäftige mich gerade mit einem neuen Projekt und bräuchte hier noch einige Denkanstösse bzw. Lösungswege. Wie die Probleme gelöst werden, ist relativ egal, sollte lediglich mit Browsern IE6 oder vergleichbar kompatibel sein.

Ich habe einige Textfelder auf meiner Seite. Diese sollten änderbar sein, um jedoch versehentlichen Änderungen vorzubeugen, wäre es klasse, wenn man diese doppelklicken muss, bevor man das Textfeld ändern kann. Zudem sollte, sofern man etwas geändert hat die Textbox mit rotem Hintergrund eingefärbt werden. Das selbe ggf. auch für Dropdownmenüs.

Desweiteren habe ich einige mehrzeilige Textfelder (textareas). Hier is geplant, oberhalb einige Gifs zu platzieren ("Buttons"). Sobald man eines dieser klickt, soll an der aktuellen Cursorstelle im der Textbox ein vordefinierter Text plaziert werden.

Wäre sehr nett, wenn mir hier jemand helfen könnte!

[wucher wichtel]

Hallo!

[...] sollte lediglich mit Browsern IE6 oder vergleichbar kompatibel sein.

Es gibt nichts, was mit dem IE6 vergleichbar ist. So schlecht ist kein anderer ;-)

[...] um jedoch versehentlichen Änderungen vorzubeugen, wäre es klasse, wenn man diese doppelklicken muss, bevor man das Textfeld ändern kann.

Ich würde es auf die schnelle in etwa so machen:

  
var aenderung_erlaubt = false;  
var inhalt = document.getElementById("textareaNo1").value;  
  
function check(){  
  if(aenderung_erlaubt = false){  
    document.getElementById("textareaNo1").value = inhalt;  
  } else {  
    return;  
  }  
}  
document.getElementById("textareaNo1").onchange = check()  
document.getElementById("textareaNo1").ondblclick = function(){aenderung_erlaubt = true};  

Per ondblclick wäre es dann möglich die Variable "aenderung_erlaubt" auf "true" zu setzen. Dann würde nichts passieren und der User könnte den Inhalt verändern.

Ich habe den Code nicht getestet und es kann auch sein, dass ich zu später Stunde irgendwelche Fehler eingebaut habe. Er soll eher als Denkanstoss fungieren :)

Zudem sollte, sofern man etwas geändert hat die Textbox mit rotem Hintergrund eingefärbt werden. Das selbe ggf. auch für Dropdownmenüs.

Bei einer Änderung rufst du eine Funktion auf, die per style-Objekt den Wert der CSS-Eigenschaft background-color verändert.

Desweiteren habe ich einige mehrzeilige Textfelder (textareas). Hier is geplant, oberhalb einige Gifs zu platzieren ("Buttons"). Sobald man eines dieser klickt, soll an der aktuellen Cursorstelle im der Textbox ein vordefinierter Text plaziert werden.

Siehe SELFHTML: http://aktuell.de.selfhtml.org/artikel/javascript/bbcode/

ciao, ww

[Sebastian]

Danke Dir schonmal, später gleich probieren. Das mit dfen mherzeiligen Textfelder hab ich nach langen experimentieren geschafft. JS war noch nie meine Stärke :P

Bei einer Änderung rufst du eine Funktion auf, die per style-Objekt >den Wert der CSS-Eigenschaft background-color verändert.

Kannste auf das bitte noch kurz eingehen? Meine Webdesign-Zeit hat schon vor ca. 7 Jahren geendet, daher bin ich nicht mehr auf dem Stand der Technik :D

Vielen Dank

[wucher wichtel]

Hallo!

Kannste auf das bitte noch kurz eingehen?

  
function changeColor(){  
  document.getElementById("TextareaNo1").style.backgroundColor = "#FF0000"; // Hier musst du darauf achten, dass du backgroundColor und nicht background-color schreibst.  
}  
  
document.getElementById("TextareaNo1").onchange = changeColor;  

ciao, ww