web-dev-qa-db-ja.com

HTML5データリストタグがSafariに表示されない

ユーザーが提案ボックスを持つことができるデータリストタグがあります。しかし、この機能はサファリではサポートされていないことに気付きました。この問題の回避策はありますか？

コードは次のとおりです。実際には、値をajaxメソッドで設定していますが、設定後は次のようになります。

<datalist id="languages">
    <option value="HTML">
    <option value="CSS">
    <option value="JavaScript">
    <option value="Java">
    <option value="Ruby">
    <option value="PHP">
    <option value="Go">
    <option value="Erlang">
    <option value="Python">
    <option value="C">
    <option value="C#">
    <option value="C++">
</datalist>

Search: 
<input type="text" list="languages">

フィドルもあります here

javascriptcsshtml5safari
23
R Doolabh

データリスト要素はSafariではサポートされていません。 http://caniuse.com/#feat=datalist

22
Tim Dearborn

Safariおよび/または古いブラウザのHTML5データリストの回避策

更新、2017年1月

IOSとデスクトップの両方 Safariはまだdatalistをサポートしていません で、これまでのところこの変化の兆候はありません。したがって、これは、問題を回避するためにappearにするハックです。 Chris Coyierも 2011年のデータリストポリフィル に挑戦しました。 Safariが 既存のW3C勧告 を将来実装することを期待しましょう。

元の投稿：

select要素を使用 をdatalist内で使用し、optionタグ値をこれらの中で読み取り可能なテキストとして複製できます。例えば：

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <style>
    input[list="languages"] {
      width: 12em;
      border: none;
      background: #eee;
    }
    select {
      width: 12em;
      margin: 0;
      margin-left: -12.75em;
    }
  </style>
</head>
<body>

Choose: <input type="text" list="languages">
<label for="languages">
  <datalist id="languages">
    <select>
      <option value="JavaScript">JavaScript</option>
      <option value="Haskell">Haskell</option>
      <option value="Ruby">Ruby</option>
      <option value="Go">Go</option>
      <option value="Python">Python</option>
      <option value="etc">etc</option>
    </select>
  </datalist>
</label>
</body>
</html>

サポートするブラウザーはdatalistを表示するだけで、Safariおよびそれ以前のブラウザーはoptionタグのinnerHTMLを表示します。 inputタグにはデフォルトの境界線があり、Safariではselect要素の背後にある見栄えが悪くなりますが、この例のように少しスタイリングすることで、Safariのサポート不足を回避し、同じ機能的な外観。 Javascriptやポリフィルは必要ありません。

27
Dave Everitt

私は少し遅れていることに気づきましたが、Safariのデータリストを選択して置き換えるのではなく、Safariのデータリストを模倣するソリューションが必要な場合：

https://github.com/Fyrd/purejs-datalist-polyfill

基本的にhtmlに含めることができる短くて甘い.jsと.cssで、データリストにリンクされた入力は、SafariとOpera miniでChrome、Firefox、Androidブラウザーと同じように動作します。

9
George

Safari 12.1の時点で、データリストがようやくサポートされました。 Appleリリースノート を参照してください。

mdn推奨されるポリフィル の開発者は非常に最新の状態を維持しているようです：

更新：Safari TPは少なくとも基本的にdatalist要素をサポートし、その機能はiOSおよびMacOS Xの両方のSafariの次のリリースに含まれます。エキサイティングなニュース！応援と実装に対応するために、すぐに新しいメジャーバージョンをリリースする予定です。

3
Motine

まず、今日も機能するスクリプトをありがとう。問題が発生した場合、オプションが左上隅（iamse7enなど）に表示されるため、datalist.polyfill.jsのこれらの行を変更する必要があります。

56：

document.body.appendChild( fakeList ); document.getElementById("myIdDiv").appendChild( fakeList );

GithubプロジェクトのexempleのBescauseは、本体の1つのdivのみであったため、問題ではありませんでした。

110：

input.value = item.innerText; input.value = item.innerHTML;

テキストだけでなく、アイテムの任意の場所をクリックします。

最後に、<script src="/static/js/datalist.polyfill.js"></script>をHTMLファイルに追加しますが、バージョンdatalist.polyfill.min.jsは追加しません

1
Mianto

Miantoがiamse7enの問題に関して言ったことに加えて、データリストを動的なDIVにバインドするために（Miantoが与え、Moritzが編集した例はハードコードされています）、行51で以下を変更します：

function convert(input, datalist, listItems) {
    var fakeList = document.createElement('ul');
    var visibleItems = null;
    fakeList.id = listId;
    fakeList.className = LIST_CLASS;
    document.body.appendChild( fakeList );

に：

function convert(input, datalist, listItems) {
    var fakeList = document.createElement('ul');
    var visibleItems = null;
    fakeList.id = listId;
    fakeList.className = LIST_CLASS;
    input.parentNode.style.position = "relative";
    input.parentNode.appendChild( fakeList );
0
EvilJordan