label-inside.js - welche Programmiersprache?

Registrierer

Erfahrenes Mitglied
In dieser Datei label-inside.js, steht folgender Text:
Code:
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

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

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

Registrierer

Erfahrenes Mitglied
Wenn es notwendig ist, richte ich das ein. Es handelt sich aber nur um diese 4 Dateien:
test.php:
Code:
<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:
Code:
.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:
Code:
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

Nutze den Saft!
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

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

Registrierer

Erfahrenes Mitglied
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

Nutze den Saft!
Ah, verstehe :)

Versuch mal das:

Code:
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

Erfahrenes Mitglied
Funktioniert ebenso! Aber ich finde Deine Änderungen nicht, was hast Du modifiziert?
Meine Version wäre so (Zeile 9):
Code:
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();
});
 

Neue Beiträge