du-doch-nicht
Banned
- Registriert
- Juni 2014
- Beiträge
- 9
Guten Abend,
vorab möchte ich euch erläutern was das Script machen soll.
In einem Formular ist ein Input-Textfeld. Beim anklicken soll darunter eine Liste mit alternativen Eingabemöglichkeiten erscheinen (ähnlich wie das HTML5 "datalist" Tag) die der Benutzer anklicken kann und im Textfeld übernommen wird, beim auswählen schließt die Liste automatisch.
Der Benutzer hat aber auch die Freiheit, etwas anderes ins Textfeld ein zu geben. Beim verlassen des Textfeldes wird die Liste geschlossen.
Meine Frage:
Das "setTimeOut" soll die onBlur-Aktion verzögern, da meine Liste ausserhalb des Textfeldes liegt und ich sonst keine Auswahl anklicken kann, weil die Liste sofort verschwindet da ich ja das Inputfeld verlasse. Das setTimeout gibt mir eine gewisse Zeit dennoch eine Auswahl anzuklicken und diese im Inputfeld übernommen wird, bevor die Liste geschlossen wird.
Ich habe aber gemerkt, wenn man langsam den Link in der Liste klickt, wird die Auswahl nicht ins Textfeld übernommen.
Langsam in dem Fall, wenn man die Auswahl mit der Maus anklickt, aber in den 200ms die Maustaste nicht loslässt, wird die Auswahl nicht übernommen.
Gibt es für "setTimeOut" eine alternative? Oder wie kann das Script umgeschrieben werden, damit es zu 100% funktioniert?
Ich kenn mich mit Javascript noch nicht so gut aus. Wäre sehr dankbar für eure Hilfe :-)
Quellcode: oder http://jsfiddle.net/YdSy6/
vorab möchte ich euch erläutern was das Script machen soll.
In einem Formular ist ein Input-Textfeld. Beim anklicken soll darunter eine Liste mit alternativen Eingabemöglichkeiten erscheinen (ähnlich wie das HTML5 "datalist" Tag) die der Benutzer anklicken kann und im Textfeld übernommen wird, beim auswählen schließt die Liste automatisch.
Der Benutzer hat aber auch die Freiheit, etwas anderes ins Textfeld ein zu geben. Beim verlassen des Textfeldes wird die Liste geschlossen.
Meine Frage:
Das "setTimeOut" soll die onBlur-Aktion verzögern, da meine Liste ausserhalb des Textfeldes liegt und ich sonst keine Auswahl anklicken kann, weil die Liste sofort verschwindet da ich ja das Inputfeld verlasse. Das setTimeout gibt mir eine gewisse Zeit dennoch eine Auswahl anzuklicken und diese im Inputfeld übernommen wird, bevor die Liste geschlossen wird.
Ich habe aber gemerkt, wenn man langsam den Link in der Liste klickt, wird die Auswahl nicht ins Textfeld übernommen.
Langsam in dem Fall, wenn man die Auswahl mit der Maus anklickt, aber in den 200ms die Maustaste nicht loslässt, wird die Auswahl nicht übernommen.
Gibt es für "setTimeOut" eine alternative? Oder wie kann das Script umgeschrieben werden, damit es zu 100% funktioniert?
Ich kenn mich mit Javascript noch nicht so gut aus. Wäre sehr dankbar für eure Hilfe :-)
Quellcode: oder http://jsfiddle.net/YdSy6/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<style>
* { font-family: Arial, Helvetica, sans-serif; }
ul.datalist {
border: 1px solid #CCC;
width: 200px;
box-shadow: 0 0 5px #DDD;
position: absolute;
z-index: 1;
margin-top: -17px;
padding: 0;
display: none;
background: #FFF;
font-size: 0.9em;
}
ul.datalist li {
display: block;
margin: 0;
list-style-type: none;
cursor: pointer;
padding: 5px;
border-bottom: 1px solid #EEE;
}
ul.datalist li:hover {
background-color: #C00;
color: #FFF;
}
</style>
</head>
<body>
<p>
<strong>Erstellt von:</strong><br />
<input type="text" id="ipt2" name="bearbeiter" value=""
onClick="drop('2','','open');" onBlur="drop('2','','close');" />
</p>
<ul id="dl2" class="datalist">
<li onClick="drop('2','Max Mustermann','');">Max Mustermann</li>
<li onClick="drop('2','Axel Springer','');">Axel Springer</li>
<li onClick="drop('2','John Doe','');">John Doe</li>
</ul>
<script>
function drop(id,val,opt)
{
var elem = document.getElementById("dl" + id);
if(opt == "open")
{
elem.style.display = "block";
}
else if (opt == "close")
{
setTimeout(function () { elem.style.display = "none"; }, 300);
}
else
{
document.getElementById("ipt" + id).value = val;
}
}
</script>
</body>
</html>
Zuletzt bearbeitet:
(Link hinzugefügt)
