JavaScript Mein Script funktioniert mit dem Event-Handler "onBlur" nicht

digiTALE · 16. Juni 2013

Guten Abend,

bei anklicken eines Input Feldes, soll ein DropDown Menü erscheinen das die Eingabe durch diversen Text-Vorlagen als Link beschleunigen soll.
Dennoch soll es dem User die Möglichkeit bieten, selber etwas hinein zu schreiben.

Wenn ich nur den Event-Handler "onClick" benutze, wird wie gewollt, ein DropDown Menü beim anklicken des Input Feldes angezeigt. Bei dieser Lösung muss der User entweder eine Textvorlage wählen oder nocheinmal auf das Input-Feld klicken damit es wieder verschwindet. Diese ist nicht gerade optimal.

Deswegen habe ich "onBlur" benutzt, damit das DropDownMenü automatisch nach verlassen des Input Feldes in ein nächstes schließt. Funktioniert auch.

Und hier kommt das Problem:
Ich kann die Links anklicken wie ich will, der Text im Input Feld ändert sich einfach nicht. Woran kann das liegen?

HTML:

<!DOCTYPE html>

<html lang="de">

<head>

	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<title>Testseite</title>

<script type="text/javascript">

function toggleFormDropDown(__ID)
{
	var __INPUT = document.getElementById("DropDown-"+__ID);
	return (__INPUT.style.display == "none") ? __INPUT.style.display = "block" : __INPUT.style.display = "none";

}
function WriteOptionIntoInput(__ID, __TEXT)
{
	document.getElementById(__ID).value = __TEXT;
	document.getElementById("DropDown-"+__ID).style.display = "none";
}
</script>

<style type="text/css">
* { font-family: Arial, Helvetica, sans-serif; padding: 0; margin: 0; }

body { padding: 25px; }

a.none { color: #444; text-decoration: none; }

a.none:hover { color: #000; text-decoration: underline; }

input[type=text] { border: 1px solid #CCC; font-size: small; padding: 5px 10px; }

.DropDown { position: absolute; display: block; z-index: 2; padding: 15px; background: #FFF; box-shadow: 0 0 3px #CCC; border: 1px solid #999; min-width: 125px; }

.DropDown p { font-size: small; color: #444; line-height: 1.6em; }

</style>

</head>

<body>


<form name="CreateForm" action="#" method="post">

	<div>
		<strong>Material: </strong>
		<input type="text" name="mat" id="mat" value="Material 1" onClick="toggleFormDropDown('mat'); return false" onBlur="toggleFormDropDown('mat'); return false" />

		<div id="DropDown-mat" class="DropDown" style="display:none">

			<p>
			&bull; <a href="" onClick="WriteOptionIntoInput('mat', 'Material 1'); return false" class="none">Material 1</a><br />
			&bull; <a href="" onClick="WriteOptionIntoInput('mat', 'Material 2'); return false" class="none">Material 2</a><br />
			&bull; <a href="" onClick="WriteOptionIntoInput('mat', 'Material 3'); return false" class="none">Material 3</a><br />
			&bull; <a href="" onClick="WriteOptionIntoInput('mat', 'Material 4'); return false" class="none">Material 4</a>
			</p>

		</div>

	</div>

</form>


</body>

</html>

Rondos · 16. Juni 2013

Schau mal, ob dein onclick überhaupt getriggert wird. Das Onblur könnte davor ausgelöst werden, womit das Menü direkt verschwunden wäre.

digiTALE · 16. Juni 2013

Rondos schrieb:
Schau mal, ob dein onclick überhaupt getriggert wird. Das Onblur könnte davor ausgelöst werden, womit das Menü direkt verschwunden wäre.

Was ist "triggern"? Wie kann ich das herausfinden?

SymA · 16. Juni 2013

Ein Event wird getriggert. Das heißt es wird ausgelöst und arbeitet den entsprechend implementierten Quellcode ab. Schreib doch einfach beim entsprechenden Event kurz ein alert oder console.log um zu sehen, ob das Event überhaupt aktiviert wird.

digiTALE · 16. Juni 2013

OK, die Funktion "WriteOptionIntoInput" wird nicht ausgeführt.
Habe ein "alert()" in der Funktion integriert und wurde nicht ausgelöst.

Also liegt es wahrscheinlich daran, da das DropDown Menü ja außerhalb des Feldes liegt und wenn ich nun den Link klicke wird onBlur aktiviert anstatt die Funktion "WriteOptionIntoInput". Richtig?

Gibt es eine alternative Lösung?

nbzklr · 16. Juni 2013

Versuch mal onblur (kleines b) oder

Code:

myInput.addEventListener("blur", function() {
  toggleFormDropDown('mat');
  return false;
}, true);

digiTALE · 18. Juni 2013

@noobzkillor

Danke für den Tipp. Nur leider funktioniert es nicht 100%ig. Beim ersten weg klicken vom Input Feld bleibt es noch offen, erst beim zweiten geht es aber dann nur einmal. Wie funktioniert das bei jQuery? Für solch eine kleine Funktion wollte ich es nicht einsetzen.

Gibt es eine CSS-Möglichkeit über Input Focus, das ich darüber ein DIV-Element (DropDown) sichtbar machen kann?

Daaron · 18. Juni 2013

Wenn Input und Div direkt aufeinander folgen sollte es in vielen Browsern gehen, ja:

HTML:

<input ... class="focustrigger" />
<div class="focustarget"></div>

Code:

div.focustarget {display: none;}
input.focustrigger:focus + div.focustarget { display: block; }

nicht ausprobiert, sollte aber gehen.

nbzklr · 18. Juni 2013

Hi,

Ich habe eben mal den Code von dir getestet und es funktioniert einwandfrei.
Welchen Browser benutzt du denn?

digiTALE · 18. Juni 2013

Ich benutze Firefox 21.

So habe ich es bei mir eingebunden.

HTML:

<form name="CreateForm" action="#" method="post">

<strong>Material: </strong><br />
<input type="text" name="mat" id="mat" value=""
onClick="toggleFormDropDown('mat'); return false"
onblur="this.addEventListener('blur', function() { toggleFormDropDown('mat'); return false; }, true);" />

<div id="DropDown-mat" class="DropDown" style="display:none">

<p>
&bull; <a href="" onClick="WriteOptionIntoInput('mat', 'Material 1'); return false" class="none">Material 1</a><br />
&bull; <a href="" onClick="WriteOptionIntoInput('mat', 'Material 2'); return false" class="none">Material 2</a><br />
&bull; <a href="" onClick="WriteOptionIntoInput('mat', 'Material 3'); return false" class="none">Material 3</a><br />
&bull; <a href="" onClick="WriteOptionIntoInput('mat', 'Material 4'); return false" class="none">Material 4</a>
</p>

</div>

</form>

nbzklr · 18. Juni 2013

Hi,

Ich meinte den Code aus dem ersten Post.
Der Funktioniert in FF22 und Chromium 29 einwandfrei.

Aber ich sehe auch gleich, was du falsch gemacht hast.
Generell solltest du inline-scripts vermeiden, damit es erst garnicht zu solchen Fehlern kommt.

Dieser Teil hier gehört in den script-tag und nicht in onblur.

Code:

 myInput.addEventListener("blur", function() {
    toggleFormDropDown('mat');
    return false;
  }, true);

Suche

JavaScript Mein Script funktioniert mit dem Event-Handler "onBlur" nicht

digiTALE

Lt. Junior Grade

Rondos

Cadet 4th Year

digiTALE

Lt. Junior Grade

SymA

Captain

digiTALE

Lt. Junior Grade

nbzklr

Ensign

digiTALE

Lt. Junior Grade

Daaron

Fleet Admiral

nbzklr

Ensign

digiTALE

Lt. Junior Grade

nbzklr

Ensign

Ähnliche Themen