# label-inside.js - welche Programmiersprache?



## Registrierer (16. Juni 2013)

In dieser Datei label-inside.js, steht folgender Text:

```
var $inputControl = $(".labelinside>input, .labelinside>textarea");
$inputControl.each(function (index, domElement) {
	/*@cc_on if (document.documentMode && document.documentMode >= 8) @*/
	if ($(this).parent().css("display") == "inline")
		$(this).parent().css("display", "inline-block");
	if (!$(this).val())
		$(this).parent().children("label").show();
});
$inputControl.bind("focus", function(event) {
	$(this).parent().children("label").hide();
});
$inputControl.bind("blur", function(event)  {
	if (!$(this).val())
		$(this).parent().children("label").show();
});
var $autofocus = $inputControl.filter("[foo]");
$autofocus.focus();
if (!$autofocus.val())
	/*@cc_on setTimeout(function () { @*/
	$autofocus.parent().children("label").show();
	/*@cc_on }, 0); @*/
$autofocus.bind("click", function(event)  {
	$(this).parent().children("label").hide();
});
$autofocus.bind("keyup", function(event)  {
	$(this).parent().children("label").hide();
});
```
Dieser ist verantwortlich, dass wenn das Feld foo den Fokus erhält, der unterlegte Text verschwindet.
Nun soll der Text aber nich bei Fokuserhalt, sondern erst bei einer erfolgten Eingabe unsichtbar werden. Was müsste geändert, bzw. in welche Sprache müsste ich mich einlesen um das zu machen?

Vielen Dank.


----------



## saftmeister (16. Juni 2013)

Sieht IMHO nach JavaScript (jQuery oder vergleichbarem) aus, und versuch es mal, die Zeile 22-24 auszukommentieren:


```
/*
$autofocus.bind("click", function(event)  {
    $(this).parent().children("label").hide();
});
*/
```


----------



## Registrierer (16. Juni 2013)

Da wird der unterlegte Text leider gar nicht mehr angezeigt.


----------



## saftmeister (16. Juni 2013)

Registrierer hat gesagt.:


> Da wird der unterlegte Text leider gar nicht mehr angezeigt.



Sorry, aber das kommt mir unwahrscheinlich vor. Dié vorgeschlagene Änderung sollte das nicht bewirken. Hast du eine URL wo man das ausprobieren kann?


----------



## Registrierer (16. Juni 2013)

Wenn es notwendig ist, richte ich das ein. Es handelt sich aber nur um diese 4 Dateien:
test.php:
	
	
	



```
<html>
 <head>
  <script type="text/javascript" language="JavaScript">
   function fokus () {
    document.getElementById('foo').focus();
   }
  </script>
 <link rel="stylesheet" type="text/css" href="test.css"/>
 </head>
 <body onload="window.location.hash='anker'; fokus();">
  <span class="labelinside"><label for="foo">Label inside</label><input id="foo"/></span>
  <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="test.js"></script>
  <a name="anker"></a>
 </body>
</html>
```
test.css:
	
	
	



```
.labelinside
{
	margin: 3px 0;
	position: relative;
}

.labelinside label
{
	color: silver;
	cursor: text;
	display: none;
	font-size: 0.8em;
	left: 0;
	line-height: 0.8em;
	padding: 6px 3px;
	position: absolute;
	top: 0;
	z-index: 0;
}

.labelinside input,
.labelinside textarea
{
	margin: 0;
}
```
test.js:
	
	
	



```
var $inputControl = $(".labelinside>input, .labelinside>textarea");
$inputControl.each(function (index, domElement) {
	/*@cc_on if (document.documentMode && document.documentMode >= 8) @*/
	if ($(this).parent().css("display") == "inline")
		$(this).parent().css("display", "inline-block");
	if (!$(this).val())
		$(this).parent().children("label").show();
});
$inputControl.bind("focus", function(event) {
	$(this).parent().children("label").hide();
});
$inputControl.bind("blur", function(event)  {
	if (!$(this).val())
		$(this).parent().children("label").show();
});
var $autofocus = $inputControl.filter("[foo]");
$autofocus.focus();
if (!$autofocus.val())
	/*@cc_on setTimeout(function () { @*/
	$autofocus.parent().children("label").show();
	/*@cc_on }, 0); @*/
$autofocus.bind("click", function(event)  {
	$(this).parent().children("label").hide();
});
$autofocus.bind("keyup", function(event)  {
	$(this).parent().children("label").hide();
});
```
und die Datei jquery-1.4.2.min.js, die Du warscheinlich hast.


----------



## saftmeister (16. Juni 2013)

Sorry, wenn ich mich da etwas dumm anstelle, aber wo ist der unterlegte Text, bzw. wann soll der auftauchen und wo?

Hab mir mal ein Dummy-Projekt mit deinen Dateien angelegt und erstmal keinen Syntax-Fehler oder dergleichen entdecken können ;-)


----------



## Registrierer (16. Juni 2013)

Tschuldige, das ist ja das Problem. Es muss bei bodyonload die Funktion fokus(); entfernt werden, sonst wird der unterlegte Text eben nicht angezeigt.


----------



## Registrierer (16. Juni 2013)

Ich bin gerade über Umwege hier im Forum fündig geworden 
Die Funktion bind() kann man dahingehend modifiziern, dass nicht fokus, sondern z. B. keypress ausgeführt wird. Zeile 9 in test.js:
$inputControl.bind("keypress", function(event)

http://www.tutorials.de/javascript-...events-wahlweise-um-funktion-auszuloesen.html

Jetz kann ich den Anker und den Fokus bei body onload definieren, und der unterlegte Text bleibt erhalten bis ich eine Eingabe tätige.

Herzlichen Dank für Deine Mühe!


----------



## saftmeister (16. Juni 2013)

Ah, verstehe 

Versuch mal das:


```
var $inputControl = $(".labelinside>input, .labelinside>textarea");
$inputControl.each(function (index, domElement) {
    /*@cc_on if (document.documentMode && document.documentMode >= 8) @*/
    if ($(this).parent().css("display") == "inline")
        $(this).parent().css("display", "inline-block");
    if (!$(this).val())
        $(this).parent().children("label").show();
});
/*
$inputControl.bind("focus", function(event) {
    $(this).parent().children("label").hide();
});
*/
$inputControl.bind("keyup", function(event) {
    $(this).parent().children("label").hide();
});

$inputControl.bind("blur", function(event)  {
    if (!$(this).val())
        $(this).parent().children("label").show();
});
var $autofocus = $inputControl.filter("[foo]");
$autofocus.focus();
if (!$autofocus.val())
    /*@cc_on setTimeout(function () { @*/
    $autofocus.parent().children("label").show();
    /*@cc_on }, 0); @*/

$autofocus.bind("click", function(event)  {
    $(this).parent().children("label").hide();
});

$autofocus.bind("keyup", function(event)  {
    $(this).parent().children("label").hide();
});
```


----------



## Registrierer (16. Juni 2013)

Funktioniert ebenso! Aber ich finde Deine Änderungen nicht, was hast Du modifiziert?
Meine Version wäre so (Zeile 9):

```
var $inputControl = $(".labelinside>input, .labelinside>textarea");
$inputControl.each(function (index, domElement) {
	/*@cc_on if (document.documentMode && document.documentMode >= 8) @*/
	if ($(this).parent().css("display") == "inline")
		$(this).parent().css("display", "inline-block");
	if (!$(this).val())
		$(this).parent().children("label").show();
});
$inputControl.bind("keypress", function(event) {
	$(this).parent().children("label").hide();
});
$inputControl.bind("blur", function(event)  {
	if (!$(this).val())
		$(this).parent().children("label").show();
});
var $autofocus = $inputControl.filter("[foo]");
$autofocus.focus();
if (!$autofocus.val())
	/*@cc_on setTimeout(function () { @*/
	$autofocus.parent().children("label").show();
	/*@cc_on }, 0); @*/
$autofocus.bind("click", function(event)  {
	$(this).parent().children("label").hide();
});
$autofocus.bind("keyup", function(event)  {
	$(this).parent().children("label").hide();
});
```


----------



## saftmeister (16. Juni 2013)

Registrierer hat gesagt.:


> Funktioniert ebenso! Aber ich finde Deine Änderungen nicht, was hast Du modifiziert?



Deine Zeile 9-12:


```
$inputControl.bind("focus", function(event) {
    $(this).parent().children("label").hide();
});
```

Meine Änderungen an dieser Stelle (Zeile 9-16):


```
/*
$inputControl.bind("focus", function(event) {
    $(this).parent().children("label").hide();
});
*/
$inputControl.bind("keyup", function(event) {
    $(this).parent().children("label").hide();
});
```


----------



## Registrierer (16. Juni 2013)

Hast Recht! 
keyup ist die bessere Variante, da keydown und keypress ständig feuern, während keyup nur einmal "zuschlägt".


----------

