[Javascript] - AddEventListener funktioniert mit dem Event-Handler "onBlur" nicht

digiTAL

digiTAL

Erfahrenes Mitglied
Guten Abend,

bei anklicken eines Input Feldes, soll eine Auswahlliste darunter erscheinen das die Eingabe durch diverse 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, eine Auswahlliste beim anklicken des Input Feldes angezeigt. Bei dieser Lösung muss der User entweder eine Textvorlage wählen (Auswahlliste wird nach klicken der Textvorlage geschlossen) oder nach eigener Texteingabe nocheinmal auf das Input-Feld klicken damit die Auswahlliste schließt (genau hier liegt das PROBLEM!). Diese momentane Lösung finde icht nicht optimal.

Deswegen habe ich "onBlur" in verbindung mit "AddEventListener" benutzt, damit die Auswahlliste nach eigener Texteingabe automatisch schließt wenn man das Inputfeld verlässt.

Die "onBlur"-Funktion arbeitet nur sporadisch, manchmal nimmt er meine Eingabe in der Auswahlliste nicht an oder die Liste verschwindet nicht, erst beim 2ten mal klicken ins Inputfeld.



Könnt Ihr das Problem nachvollziehen?

Woran kann das liegen?

HTML: 
<!DOCTYPE html>
<html>
<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="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">usw...</a><br />
</p>
     
</div>
</div>

</form>

</body>

</html>
 
Nimm es mir nicht übel, aber für so etwas brauchst du kein JavaScript:
HTML: 
<input type="text" name="mat" list="dropdown-list" />
<datalist id="dropdown-list">
  <option>Material 1</option>
  <option>Material 2</option>
  <option>Material 3</option>
</datalist>
 
einfach nur crack hat gesagt.:
Nimm es mir nicht übel, aber für so etwas brauchst du kein JavaScript:
HTML: 
<input type="text" name="mat" list="dropdown-list" />
<datalist id="dropdown-list">
  <option>Material 1</option>
  <option>Material 2</option>
  <option>Material 3</option>
</datalist>
Zum Vergrößern anklicken....


Danke für den Hinweis. Gibt es eine Einstellung bei der sich die Datalist gleich öffnet ohne eine Eingabe und Doppelklick aufs Feld zu tätigen?

Ist eben nur für neuere Browser, aber ich brauch es eh nur fürs Intranet.
 
Nimm jQuery und die focusin-/focusout-Funktionen, dann sollte es kein Problem sein.

Javascript: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#div1").focusin(function() {
	$("#liste").css("display", "block");
});

$("#div2").focusin(function() {
	$("#liste").css("display", "none");
});

$("#liste").click(function() {
	$("#text1").val($("#liste").val());
	$("#liste").css("display", "none");
});

$("#text1").click(function() {
	$("#text1").val("");
});

$("#text1").blur(function() {
	if ($("#text1").val() != "") $("#liste").css("display", "none");
});

});
</script>
HTML: 
<div id="div1">
	<input type="text" name="text1" value="" style="width: 200px;" id="text1"/>
	<br />
	<select name="list" size="3" style="width: 200px; border: none; display: none;" id="liste">
	    <option value="1">1</option>
	    <option value="2">2</option>
	    <option value="3">3</option>
	</select>
</div>

<div id="div2">
	<input type="text" name="text2" value="" style="width: 200px;"/>
</div>

Einzige Bedingung, es erfodert jQuery >= 1.4
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück