HTML-Datenliste für die Eingabe von text mit der option Wert

Wenn in Google Chrome, das erlaubt es mir zu Holen "rot" und "blau" aus einem drop-down-nach der Eingabe von "b" oder "r":

<input type="text" list="colors" />
<datalist id="colors">
  <option value="red">
  <option  value="blue">
</datalist>

Aber in Safari tut es nicht.

  1. Warum?

  2. Wenn ich wollte, es zu tun, so in Safari, was würde ich tun?

InformationsquelleAutor benbeck1990 | 2014-12-30
  1. 3

    Den <datalist> tag ist eigentlich nicht nativ unterstützt Safari noch nicht. Allerdings gibt es ein paar Lösungen für das problem. Unten ist eine Liste der browser-Kompatibilität mit der <datalist> tag.

    Chrome: 20.0

    IE: 10.0

    Firefox: 4.0

    Safari: Nicht Unterstützt

    Oper: 9.0

    Lösung Ein

    Sie könnten überlegen, ein <select> tag, obwohl dies hat seine Nachteile. Im Gegensatz zu den <datalist> tag, der Benutzer muss wählen Sie eine der Optionen, die Sie gegeben haben. Für eine <datalist> tag, die der Benutzer eingeben kann, was er will.

    Lösung B

    Erstellen Sie ein <select> element und ein <input> - element entsprechend die doppelte Funktionalität der <datalist> tag.

    <p>Choose from this list
<select>
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>
or type in a custom input
<input type="text" name="custominput">

    Lösung C

    Verwenden Sie ein polyfill Lösung, um es zu lösen. Dies ist komplizierter. Sie müssen verwenden Sie die modenizr Bibliothek, diese Aufgabe zu erfüllen.

    http://css-tricks.com/relevant-dropdowns-polyfill-for-datalist/

    Lösung D

    Sie können eine datafill Bibliothek wie webshim, die es Ihnen ermöglicht, zuverlässig HTML5-features in allen Browsern, trotz der fehlenden nativen Unterstützung.

    http://afarkas.github.io/webshim/demos/

    InformationsquelleAutor Henry Zhu
  2. 1

    Den datalist - tag wird nicht unterstützt Safari und teilweise Unterstützung durch IE, Kasse die Unterstützung hier.

    Sollten Sie überlegen, verwenden Sie die wählen Sie tag (mit dem multiple-Attribut, wenn Sie möchten, um mehrere Werte zulassen):

    HTML:

    <select multiple>
  <option value="red">red</option>
  <option value="blue">blue</option>
  <option value="green">green</option>
</select>

    Oder verwenden Sie Entsprechenden Dropdown eine HTML5 datalist-polyfill, die helfen könnten, Sie zu beheben, Ihre crossbrowser-Probleme.

    InformationsquelleAutor ianaya89
Schreibe einen Kommentar