2016-11-19 48 views
1

htmlの機能を使ってみると面倒な間違いがありましたが、私はSafariがウェブサイトを展開するのに数時間かかると思います。データリストのサポートを持っている...Safari/Operaでdatalistを有効にするためのスクリプト

http://caniuse.com/#search=datalist

これは、この特定のウェブサイトのための聴衆の大部分のような、私はサファリを構成することを期待し、技術的障害とで構成されているのでかなり面倒なことです30-ウェブサイト上のすべてのアクセスの50%。

データリストのシンプル・アイ・ポリフィルがJavaScriptで書かれているので、スクリプト・タグを含めるだけで、HTML全体をシムなしで問題を取り除くことができます私は上記のJavaScriptを見つけることができません。

私はあなたにそれを書いてもらうつもりはありません、私は明らかに時間の束を無駄にしたいと思っていました。私は、私の愚かさと怒りの中で、今見つかるようなことができない、あなたが本当にテストしたライブラリを知っていることを皆さんに知ってもらいたいと思います。誰もが問題にコメントする前に

は、はい、私のユーザーはそこから来る可能性が半分までを考慮Safariで並列テストを行うにはない、私の愚かだった...しかし、後知恵は20-20

編集です。私は言及する必要がありますが、私は悲しかった2つのプラグインを見つけた、Jquery &近代化に依存し、それは本当に依存しているのですが、

編集:明らかに疑問を読まずに、この質問に重複してマークしました。

私は、Safari/Opera miniのデータをpolyfillsするJavascriptスクリプトが必要です。ここで、これらの用語を使用してみましょう。

- > Javascript!= Hmtml - > polyfill:https://en.wikipedia.org/wiki/Polyfill TL:DR:ブラウザでサポートされていない機能を実装できます。

- > datalist:ユーザーが単語を入力要素に動的に入力できるようにし、ドロップダウンリストからオートコンプリートを提案します。それは次のようになります。a)それはあなたが痛みを伴わずに挿入するJavaScriptを、HTML編集を取るそのない 、それは他の人間が読むことができます:他の回答と

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

https://jsfiddle.net/a5o2cna3/

問題ということですコードなし:何が元気? b)データ要素を選択要素で置換します。あなたが要素を視覚的にどのように見せても気にしない場合や、入力するのではなく、ユーザーが入力する必要があるという事実を気にしない場合、あらかじめ定義されたオプションを入力するのではなく、ユーザーはリストから選択する必要があります(モバイルでは非常に面倒です)。

<body> 
Choose: <input type="text" list="languages"> 
<label for="languages"> 
    <select id="languages"> 
     <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> 
</label> 

https://jsfiddle.net/vv63pptj/

ので、この質問は確かに似ていますが、「wasn質問への類似した:

これは、提案された解決策は、(「複製」問題の1)どのように動作するかです私はそれを解決したいと思っていた方法を解決しました。そして、 "necro bumping"(それが可能かどうかわからない)の代わりに。私が望んでいた(といくつかのgithubの上で掘り後に発見された)ものを例示するために今

、:

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

- >いいえ外部依存関係、JSとCSS のわずか数百行 - >はなることはできません単純にhtmlに含まれており、既存のdatalistsはhtmlをmanglingせずに動作します。 - >入力要素をfirefox、chrome、androidブラウザと同様にsafariとopear miniで動作させます。同じ機能を提供し、同じように見えます。これはあなたの要素を異なる動作の要素で置き換えますが、よく似たような状況で使用されます。「これは、サポートしていないブラウザのjavascriptで要素を模倣しています」

私はこの回答を同じような質問です。人が読んで代わりにしたい場合。しかし、なぜ私は尋ねられたので、これが重複していないのか、できるだけ明確に説明したかったのです。

+0

回避策をご覧ください:http://stackoverflow.com/questions/27494084/html5-datalist-tag-is-not-populating-in-safari –

+0

https://jqueryui.com/autocomplete/..you jqueryのソースファイルをインクルードする必要があります。それはすべてです.... – repzero

+0

@Timその要素を、私が求めたものではなく、違う振る舞いを持つ別のものに置き換える回避策です。 – George

答えて

3

私の質問への答えはgithubの上の少し掘っていました:基本的に

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

短いと甘い.jsファイルを、あなたのhtmlに含めることができ.CSS、それがdatalistsリンクの入力が振る舞う作りますChrome、Firefox、Android BrowserのSafariやOpera Miniと同じです。

関連する問題