Zur Navigation

vordefinieerter Text in Input-Feldern

1 AndiN

Hallo zusammen,
ich habe eine Frage zu vordefiniertem Text in Input-Feldern. Aktuell habe ich Folgendes:

<input type="text" name="headline" style="width:528px;color:#aaa;font-style:italic;" class="text" value="Tragen Sie eine Überschrift ein." onBlur="if(this.value=='') this.value='Tragen Sie eine Überschrift ein.';" onFocus="if(this.value=='Tragen Sie eine Überschrift ein.') this.value='';">

Das funktioniert soweit ganz gut. Was ich allerdings als Modifikation gerne hätte ist, dass der vordefinierte Text zwar grau ist, jedoch wenn man reinklickt und der Text verschwindet der Text welchen man dann einträgt in schwarz erscheint. Wäre für Tipps dankbar.

04.12.2013 10:17

2 Jörg

Ich würde das ganze in Funktionen auslagern:

<script type="text/javascript">
function toggleValue(e) {
    var text = 'Tragen Sie eine Überschrift ein.';
    var input = document.getElementById('headline');
    if (e == 'blur' && input.value == '') {
        input.value = text;
        input.style.color = '#aaa';
    } else if (e == 'focus' && input.value == text) {
        input.value = '';
        input.style.color = '#000';
    }
}
function initValue() {
    toggleValue('blur');
}
window.onload = initValue;
</script>

<input
type="text"
name="headline"
id="headline"
style="width:528px;color:#aaa;font-style:italic;"
class="text"
value=""
onBlur="toggleValue('blur')"
onFocus="toggleValue('focus')"
>

04.12.2013 12:15 | geändert: 04.12.2013 12:16

3 AndiN

Danke schonmal.
Jetzt ist es jedoch so, dass ich dieses Eingabefeld in einer Schleife stehen habe. D.h. ich müsste die Funktion auch in die Schleife packen was zwar vermutlich funktioniert, ich jedoch als sehr unglückliche Lösung ansehe.

<?php
for(...)
{
?>
<script type="text/javascript">
<!--
function toggleValue<?php echo $multi_array[$a][0]; ?>(e)
{
	var text = 'Tragen Sie hier eine Themenüberschrift ein.';
	var input = document.getElementById('headline<?php echo $multi_array[$a][0]; ?>');
	if (e == 'blur' && input.value == '')
	{
		input.value = text;
		input.style.color = '#aaa';
	}
	else
	{
		if (e == 'focus' && input.value == text)
		{
			input.value = '';
			input.style.color = '#000';
		}
	}
}
function initValue<?php echo $multi_array[$a][0]; ?>()
{
	toggleValue<?php echo $multi_array[$a][0]; ?>('blur');
}
window.onload = initValue<?php echo $multi_array[$a][0]; ?>;
-->
</script>
<input type="text" name="headline<?php echo $multi_array[$a][0]; ?>" style="width:528px;" class="text" value="<?php echo $multi_array[$a][1]; ?>" onBlur="toggleValue<?php echo $multi_array[$a][0]; ?>('blur')" onFocus="toggleValue<?php echo $multi_array[$a][0]; ?>('focus')">
<?php
}
?>

04.12.2013 13:09

4 Jörg

Die unterschiedlichen IDs können auch als Optionsparameter der Funktion übergeben werden.

Frage zwischendurch:

verwendest du jquery? dann könnte ich die Code-Beispiele etwas einfacher gestalten...

04.12.2013 13:48

5 AndiN

Nein, In dem Fall verwende ich kein jquery.

Also so?


<script type="text/javascript">
<!--
function toggleValue(e,a)
{
	var text = 'Tragen Sie hier eine Themenüberschrift ein.';
	var input = document.getElementById('headline'+a);
	if (e == 'blur' && input.value == '')
	{
		input.value = text;
		input.style.color = '#aaa';
	}
	else
	{
		if (e == 'focus' && input.value == text)
		{
			input.value = '';
			input.style.color = '#000';
		}
	}
}
function initValue()
{
	toggleValue('blur');
}
window.onload = initValue;
-->
</script>
<?php
for(...)
{
?>
<input type="text" name="headline<?php echo $multi_array[$a][0]; ?>" style="width:528px;" class="text" value="<?php echo $multi_array[$a][1]; ?>" onBlur="toggleValue('blur','<?php echo $multi_array[$a][0]; ?>')" onFocus="toggleValue('focus','<?php echo $multi_array[$a][0]; ?>')">
<?php
}
?>

04.12.2013 13:56

6 Jörg

Auch der dynamische value Wert sollte noch als Parameter übergeben werden.

Ohne Framework wie jquery wird das mit der init Funktion leider etwas komplizierter; ich muss das selbst erst noch recherchieren - ich schreib das dann hier, sobald ich's raus habe

04.12.2013 14:07 | geändert: 04.12.2013 14:07

7 Jörg

Wenn die Werte eh dynamisch über PHP befüllt werden, ist es wohl am einfachsten, auf die init Funktion zu verzichten, und die Werte direkt in den Attributen des input Elements unterzubringen.

<script type="text/javascript">
function toggleValue(id, e, text) {
    var input = document.getElementById(id);
    if (e == 'blur' && input.value == '') {
        input.value = text;
        input.style.color = '#aaa';
    } else if (e == 'focus' && input.value == text) {
        input.value = '';
        input.style.color = '#000';
    }
}
</script>

<input
type="text"
name="headline<?php echo $multi_array[$a][0]; ?>"
id="headline<?php echo $multi_array[$a][0]; ?>"
style="width:528px;color:#aaa;font-style:italic;"
class="text"
value="<?php echo $multi_array[$a][1]; ?>"
onBlur="toggleValue(this.id, 'blur', '<?php echo $multi_array[$a][1]; ?>')"
onFocus="toggleValue(this.id, 'focus', '<?php echo $multi_array[$a][1]; ?>')"
>

Wichtig ist hier die ID, die denselben Wert wie das name Attribut haben kann

Übrigens würde ich die <!-- und --> innerhalb eines <script> Elements heutzutage nicht mehr verwenden. Die waren mal notwendig für Browser, die kein JavaScript verstanden - diese sind aber bereits vor über zehn Jahren ausgestorben.

04.12.2013 14:36

8 AndiN

Irgendwie fehlt da jetzt aber etwas. Wo ist der vordefinierte Text hin?
Das habe ich mal getestet und nun wird bereits eingetragener Text grau und kursiv angezeigt, und der vordefinierte Text (logischerweise) gar nicht mehr.

Gleicher Effekt ebenfalls wenn ich den Code wie folgt ändere:

<input
type="text"
name="headline<?php echo $multi_array[$a][0]; ?>"
id="headline<?php echo $multi_array[$a][0]; ?>"
style="width:528px;color:#aaa;font-style:italic;"
class="text"
value="<?php echo $multi_array[$a][1]; ?>"
onBlur="toggleValue(this.id, 'blur', 'Tragen Sie hier eine Überschrift ein.')"
onFocus="toggleValue(this.id, 'focus', 'Tragen Sie hier eine Überschrift ein.')"
>

05.12.2013 10:42

9 Jörg

Sind $multi_array[$a][1] und 'Tragen Sie hier eine Überschrift ein.' nicht das gleiche? wenn nicht, was ist denn in $multi_array[$a][1] enthalten?

05.12.2013 11:23

10 AndiN

Da ist die echte Überschrift drin die ich eingetragen habe nachdem ich den vordefinierten Text weggeklickt habe. Sobald im Feld etwas eingetragen wurde soll es ja auch nachd em Anspeichern angezeigt werden um es später zu editieren. Hier geht's nicht um ein Kontaktformular sondern um ein CMS-Eingabefeld. Sorry, das hatte ich vergessen zu erwähnen.

05.12.2013 11:36