HTML5-Datenliste sichtbar machen, wenn das Fokusereignis bei der Eingabe ausgelöst wird

Lesezeit: 7 Minuten

Wie einige vielleicht bereits wissen, ist das Stylen von Select-Elementen ein Albtraum, der ohne Javascript-Tricks buchstäblich unmöglich ist. Die neue Datenliste in HTML5 könnte denselben Zweck erfüllen, da dem Benutzer eine Liste von Optionen präsentiert wird und der Wert in einem Eingabetextfeld aufgezeichnet wird.

Die Einschränkung hier ist, dass die Liste nicht angezeigt wird, bis der Benutzer beginnt, etwas in das Textfeld einzugeben, und selbst dann werden nur mögliche Übereinstimmungen basierend auf ihrer Eingabe angezeigt. Das gewünschte Verhalten ist, dass die gesamte Liste der Optionen sichtbar wird, sobald der Fokus auf das Feld gelegt wird.

Also habe ich diesen Code – auf jsbin anzeigen

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Input - Datalist</title>
</head>
<body>
  <input list="categories">
  <datalist id="categories">
    <option value="Breakfast">Breakfast</option>
    <option value="Brunch">Brunch</option>
    <option value="Lunch">Lunch</option>
    <option value="Dinner">Dinner</option>
    <option value="Desserts">Desserts</option>
  </datalist>
</body>
</html>

und ich versuche, das mit diesem Javascript zu zeigen:

    var catVal = document.getElementsByTagName("input")[0],
    cat = document.getElementById("categories");

    catVal.style.fontSize = "1.3em";

    catVal.addEventListener("focus", function(event){
     cat.style.display = "block";
    }, false);

Jede Hilfe wäre willkommen,

Prost

  • Ich versuche das gleiche zu erreichen, hattest du bisher Glück?

    – Glanz

    21. April 2013 um 16:51 Uhr

Benutzer-Avatar
Ulrich Bert

Ich verwende folgenden Code:

<input name="anrede" 
    list="anrede" value="Herr" 
    onmouseover="focus();old = value;" 
    onmousedown = "value="";" 
    onmouseup="value = old;"/>

<datalist id="anrede">
    <option value="Herr" selected></option>
    <option value="Frau"></option>
    <option value="Fraulein"></option>
</datalist>

Mouseover:

Fokus setzen und alten Wert in einer — globalen — Variablen speichern

Maus nach unten:

Wert löschen und anzeigen datalist (integrierte Funktionalität)

Maus hoch:

Alten Wert wiederherstellen

Dann neuen Wert auswählen.

Finden Sie dies eine akzeptable Problemumgehung für eine Combobox.

  • Wie macht das das, wonach das OP gefragt hat?

    – Tom

    27. Juli 2014 um 8:32 Uhr

  • Wird überhaupt JQuery-Code benötigt? Ich denke, Datenliste und Eingabe mit Listenzuordnung sollten ausreichen, um das Erforderliche (in Chrome) zu tun, oder gibt es hier ein Browser-Kompatibilitätsproblem, das ich vermisse?

    – saurshaz

    26. April 2015 um 4:42 Uhr

Benutzer-Avatar
Benutzer4723924

Ich hoffe, Ihnen gefällt diese Lösung:

Ich habe dem Eingabefeld zum Speichern ein „temp“-Attribut hinzugefügt, und sobald die Maus über das Eingabefeld schwebt, speichert es seinen aktuellen Wert in temp und löscht dann den Wert, damit die Datenliste geöffnet werden kann.

Beim Mouseout wird der Feldwert aus der Variablen temp wiederhergestellt. Diese Lösung funktioniert hervorragend unter Chromium, das ich getestet habe.

Als Bonus können Sie a hinzufügen placeholder="Click to see all your options"

<input value="Classic" list="myDatalist" temp="" onmouseover="this.temp=this.value; this.value="";" onmouseout="this.value=this.temp;">
<datalist id="myDatalist" open="open"> 
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
      </datalist>

  • Ich habe das Gefühl, dass die Spezifikation ein weiteres INPUT-Attribut haben sollte, das den Browser anweist, dieses Verhalten oder so etwas bereitzustellen. Aus Sicht der Benutzerfreundlichkeit fehlt meiner Meinung nach die List/Datalist-Spezifikation. Ihre Lösung ist ein sauberer, einfacher Workaround! Vielen Dank!

    – Todd Hammer

    2. Juli 2018 um 17:41 Uhr

  • Wenn das Dropdown-Menü in Ihrem Beispiel geöffnet ist und ich die Seite scrolle, wird das Dropdown-Menü ebenfalls nach unten gescrollt (mit Chromium). Ich habe dieses Verhalten noch nie zuvor mit Datalist gesehen.

    – Sybille Peters

    15. Mai 2020 um 16:20 Uhr

In der “Ulrich Berth”-Antwort wird beim Klicken auf die Eingabe der Wert in der Eingabe zurückgesetzt und es ist nicht möglich, den darin enthaltenen Text auszuwählen. Sie können dies verwenden, um das Problem zu vermeiden:

<input id = "input" name="anrede" 
    list="anrede" value="Herr" 
    onmouseover="focus();old = value;" 
    onmousedown = "inputFocus();" 
    onmouseup="value = old;"/>

<datalist id="anrede">
    <option value="Herr" selected></option>
    <option value="Frau"></option>
    <option value="Fraulein"></option>
</datalist>
function inputFocus(){
    var input = document.getElementById("input");
    if(input.value == ""){
        value="";
    }else{
        old = value = input.value;
    }
}

Die Frage ist ziemlich alt, aber sie ist die Top-Suche bei Google und es sind keine Antworten zu finden, also werde ich sie hier hinzufügen.

Um die Datenliste beim ersten Klick zu erweitern, müssen Sie festlegen

dataListElement.style.display = "block";

und verstecken Sie es sofort in der nächsten Zeile, sodass es nicht als Element in Ihrem DOM angezeigt wird, sondern nur unter dem Eingabeelement erweitert wird.

dataListElement.style.display = "none";

Ab heute wird es nicht beim ersten Klick nur in Firefox erweitert.

Benutzer-Avatar
schreibe nach Bhuwan

HTML:

<!DOCTYPE html>
<html>
<head>
   <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

   <meta charset=utf-8 />
   <title>Input - Datalist</title>
</head>
<body>

  <input list="categories" id="categories2" type="text">
  <div id="result"></div>
  <datalist id="categories">
     <option value="Breakfast">Breakfast</option>
     <option value="Brunch">Brunch</option>
     <option value="Lunch">Lunch</option>
     <option value="Dinner">Dinner</option>
     <option value="Desserts">Desserts</option>
  </datalist>
</body>
</html>

jQuery:

var result="";
$(document).ready(function(){  
   $('input[type=text]').focus(function(){
      $('#categories option').each(function(){
      result=result+" "+$(this).val();
      });

      $('#result').show().html(result);
      $('input[type=text]').unbind('focus');
   });
   $('input[type=text]').blur(function(){
       $('#result').hide();  
       $('input[type=text]').focus(function(){
           $('#result').show();
       });

   });  
});

Funktionierender JS-Bin

http://jsbin.com/urupit/4/watch

  • Gutes Denken, aber das ist nicht das Verhalten, das ich anstrebe. Für unsere UX möchten wir kein Halter-Div erstellen, da wir mindestens 3 dieser Eingaben nebeneinander haben werden. Ich möchte, dass die Datenliste anzeigt, wann die Eingabe das Fokusereignis erhält.

    – Ady Ngom

    27. März 2013 um 17:43 Uhr

  • Warum nicht auf den Eingabetyp Text doppelklicken? Es wird die gesamte Liste angezeigt.

    – writeToBhuwan

    27. März 2013 um 19:37 Uhr

  • Als Entwickler weiß ich, dass ich das tun muss, um dorthin zu gelangen, aber es ist für den Benutzer, der höchstwahrscheinlich daran gewöhnt ist, einmal in ein Eingabefeld zu klicken und mit der Eingabe zu beginnen, nicht offensichtlich, weshalb ich versuche, den zweiten Klick auszulösen sobald sie sich konzentrieren

    – Ady Ngom

    28. März 2013 um 14:37 Uhr


  • Sie wissen nur, dass sie doppelklicken müssen, wenn sie dazu aufgefordert werden, ansonsten ist es nicht offensichtlich

    – droh

    2. November 2018 um 15:11 Uhr

  • Gutes Denken, aber das ist nicht das Verhalten, das ich anstrebe. Für unsere UX möchten wir kein Halter-Div erstellen, da wir mindestens 3 dieser Eingaben nebeneinander haben werden. Ich möchte, dass die Datenliste anzeigt, wann die Eingabe das Fokusereignis erhält.

    – Ady Ngom

    27. März 2013 um 17:43 Uhr

  • Warum nicht auf den Eingabetyp Text doppelklicken? Es wird die gesamte Liste angezeigt.

    – writeToBhuwan

    27. März 2013 um 19:37 Uhr

  • Als Entwickler weiß ich, dass ich das tun muss, um dorthin zu gelangen, aber es ist für den Benutzer, der höchstwahrscheinlich daran gewöhnt ist, einmal in ein Eingabefeld zu klicken und mit der Eingabe zu beginnen, nicht offensichtlich, weshalb ich versuche, den zweiten Klick auszulösen sobald sie sich konzentrieren

    – Ady Ngom

    28. März 2013 um 14:37 Uhr


  • Sie wissen nur, dass sie doppelklicken müssen, wenn sie dazu aufgefordert werden, ansonsten ist es nicht offensichtlich

    – droh

    2. November 2018 um 15:11 Uhr

1092780cookie-checkHTML5-Datenliste sichtbar machen, wenn das Fokusereignis bei der Eingabe ausgelöst wird

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy