お知らせ:


 ◇ YouTube Apple Japan チャンネル で有用なヒントや使い方を配信中です。
 ◇ iOS 向け Apple サポート App のバージョン 2.4.1 が公開されました。

しばらく返答が寄せられていないようです。 再度ディスカッションを開始するには、新たに質問してください。

質問:

質問: Safari11.0のinput type=searchタグ対応について

★HTML5タグリファレンス

<input type="search"> …… 検索テキストの入力欄を作成する

http://www.htmq.com/html5/input_type_search.shtml


上記のURLで確認していただくと、わかると思うのですが

Chrome,FireFox,IEなどのブラウザでは<input type="search">

に該当する検索窓をダブルクリックすると、検索履歴のバー

が現れるのですが、Safariではでてきません。


検索履歴のバーを出すようにするには、どのような対応をすれば

良いか、もしくは現状では対応不可なのかが知りたいです。


ご存知の方がいらっしゃいましたら、教えてください。

投稿日

返信
スレッドに付いたマーク この回答で解決
回答:
回答:

久しぶりにHTMLいじりました。ソースを見るのは時々やってましたが、書いて試すのは何年振りでしょうか^^;


本題ですが、先の画面はご想像のとおり「戻る」で試したものです。

で、色々試した結果、こんな形になりました。(肝となるところだけ)

# テスト環境:macOS 10.13.3、Safari 11.0.3、Server 5.5(Webサーバをlocalhostに対して起動)

確認した限りでは新規ページで開いても履歴が表示されてます。


<input type="search" tagindex="2" name="qt" autosave="saved-qt" size="31" maxlength="255" autocomplete="on" results="10">

# nameは違いますが、一応「拝啓〜」のものに近づけてます。

  • autosave=uniq-name :これを指定することでページをリロードしても検索履歴が残るようになります。(これもresultsと同じくAppleによる拡張機能[ Specifies an autosave name for a search field, so prior searches can be saved. ]です)
  • autocomplete="on":自動補完。過去に使った検索データを元に補完してくれます。ここで参照する検索データは検索履歴で表示するデータとは別個に保存されているようで検索履歴が表示されなくても補完候補は表示されました。
  • 各attributeの順番も(ものによっては)大事なようで、とりあえずこの順番に落ち着きました。


実行結果:

ユーザがアップロードしたファイル

ここから"e"を入力した状態:履歴に表示されている範囲以前の検索データであるelevenが候補に上がってます。

ユーザがアップロードしたファイル

以上、ご参考まで。

投稿日

スレッドに付いたマーク 参考になった

2018/02/09 15:21 m3r2y11 への返信 m3r2y11 への返信

検索に引っかかったのですが、WebKitの隠し機能(?)として<input type="search" results=5>のようにすると虫眼鏡アイコンのクリックで検索履歴の表示が可能になるようです。

参考サイト:https://css-tricks.com/webkit-html5-search-inputs/

Safari 11.0.3/macOS 10.13.3での例:(他のブラウザとの動作比較はしてません)

ユーザがアップロードしたファイル

希望にあうものか不明ですが、ご参考まで。

スレッドに付いたマーク 参考になった

2018/02/09 15:51 ToMi への返信 ToMi への返信

勝手に補足。


results 属性については下のリンク先に説明があります。


Safari HTML Reference > Supported Attributes

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html


Safari HTML Reference > Supported Attributes > HTML Attributes > results より

results


Specifies how many results should be returned by the search input type.


Related Tags

input


Support Level

Apple extension

ディスカッションを部分的に表示しています

返信をすべて表示

ページコンテンツが読み込まれました

スレッドに付いたマーク 参考になった

2018/02/09 15:21 m3r2y11 への返信 m3r2y11 への返信

検索に引っかかったのですが、WebKitの隠し機能(?)として<input type="search" results=5>のようにすると虫眼鏡アイコンのクリックで検索履歴の表示が可能になるようです。

参考サイト:https://css-tricks.com/webkit-html5-search-inputs/

Safari 11.0.3/macOS 10.13.3での例:(他のブラウザとの動作比較はしてません)

ユーザがアップロードしたファイル

希望にあうものか不明ですが、ご参考まで。

2018/02/09 15:21

返信 参考になった (1)
スレッドに付いたマーク 参考になった

2018/02/09 15:51 ToMi への返信 ToMi への返信

勝手に補足。


results 属性については下のリンク先に説明があります。


Safari HTML Reference > Supported Attributes

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html


Safari HTML Reference > Supported Attributes > HTML Attributes > results より

results


Specifies how many results should be returned by the search input type.


Related Tags

input


Support Level

Apple extension

2018/02/09 15:51

返信 参考になった (1)

2018/02/09 16:38 ToMi への返信 ToMi への返信

ご回答ありがとうございます。

先ほど、自身の環境で試してみたのですが、検索履歴のバー

は出てきたのですが、検索履歴は出ない状態でした。

(webkitの記述も該当箇所に追記しました。なんでだろう。。)

Safariはデフォルトでは検索履歴が出ないんですね。

2018/02/09 16:38

返信 参考になった

2018/02/09 16:39 Hiro.S への返信 Hiro.S への返信

ご回答ありがとうございます。

公式のリファレンスのようなものがあるんですね。

参考になります。

2018/02/09 16:39

返信 参考になった

2018/02/09 17:35 m3r2y11 への返信 m3r2y11 への返信

> 検索履歴は出ない状態でした。


ええと、実際に送信しましたか?少なくとも当方の環境 (Mac OS X 10.6.8 / Safari 5.1.10) では履歴が表示されますよ。


試しに↓このページで適当に検索してみてはどうでしょうか?


拝啓 アップル様

http://apple.fan.coocan.jp/

2018/02/09 17:35

返信 参考になった

2018/02/09 18:57 m3r2y11 への返信 m3r2y11 への返信

簡単にテストしてみました。(環境が古くてすみません)


Safari 5.1.10

(A) 検索 → 検索結果(別のページ) → 元のページに戻る => 検索履歴が表示される

(B) 検索 → 検索結果(別のページ) → 新規にページを開く => 検索履歴が表示されない


Firefox ESR 45.9.0

(A) 検索 → 検索結果(別のページ) → 元のページに戻る => 検索履歴が表示される

(B) 検索 → 検索結果(別のページ) → 新規にページを開く => 検索履歴が表示される


(B) の挙動が Firefox と Safari では異なるようですね。普段検索履歴は使ってないので知りませんでした。Safari 6 以上については分かりませんが...、ご参考まで。

2018/02/09 18:57

返信 参考になった

2018/02/09 22:32 Hiro.S への返信 Hiro.S への返信

Hiro.Sさん


ご自身の環境で試してくださったんですね、ありがとうございます。

紹介してくださったサイトで実際に送信した結果、できませんでした。

虫眼鏡のマークが出てくるんですが、送信後、更新をかけても

「検索履歴はありません」と表示されてしまいます。

ちなみにChrome(バージョン63)では虫眼鏡のマークはないものの、

ダブルクリックすることで検索履歴が出てくることを確認しました。

2018/02/09 22:32

返信 参考になった

2018/02/09 23:22 m3r2y11 への返信 m3r2y11 への返信

このような手順でもダメですか?

1. フォームに検索語句を入力

2. ボタン「サイトのなかを検索」をクリック => Google に飛ぶ

3. Safari > メニューバー > 履歴 > 戻る

4. フォームの虫眼鏡をクリック => 履歴が表示される


当方ではこんな感じになります。

ユーザがアップロードしたファイル


あと、Safari でプライベートブラウズが有効になってると履歴が表示されませんが、その辺はどうでしょうか?


それでダメだとなると私にはちょっと分かりません。ほかの方の回答を待ってください。

2018/02/09 23:22

返信 参考になった

2018/02/09 23:33 Hiro.S への返信 Hiro.S への返信

その手順にそって行い、確認しましたが相変わらず

以下のようです。プライベートブラウズではありません。

ユーザがアップロードしたファイル

また、紹介していただいた手順通りでなくても、

感覚的に使っていても出るのが本来だと思うので、

Safariの不具合(?)のような気もします。


ご親切にありがとうございます。

2018/02/09 23:33

返信 参考になった

2018/02/10 00:06 m3r2y11 への返信 m3r2y11 への返信

ToMi さんのところではできてるのに不思議ですね。

あまり役に立てなかったようですみませんでした。

2018/02/10 00:06

返信 参考になった
スレッドに付いたマーク この回答で解決

2018/02/10 04:11 m3r2y11 への返信 m3r2y11 への返信

久しぶりにHTMLいじりました。ソースを見るのは時々やってましたが、書いて試すのは何年振りでしょうか^^;


本題ですが、先の画面はご想像のとおり「戻る」で試したものです。

で、色々試した結果、こんな形になりました。(肝となるところだけ)

# テスト環境:macOS 10.13.3、Safari 11.0.3、Server 5.5(Webサーバをlocalhostに対して起動)

確認した限りでは新規ページで開いても履歴が表示されてます。


<input type="search" tagindex="2" name="qt" autosave="saved-qt" size="31" maxlength="255" autocomplete="on" results="10">

# nameは違いますが、一応「拝啓〜」のものに近づけてます。

  • autosave=uniq-name :これを指定することでページをリロードしても検索履歴が残るようになります。(これもresultsと同じくAppleによる拡張機能[ Specifies an autosave name for a search field, so prior searches can be saved. ]です)
  • autocomplete="on":自動補完。過去に使った検索データを元に補完してくれます。ここで参照する検索データは検索履歴で表示するデータとは別個に保存されているようで検索履歴が表示されなくても補完候補は表示されました。
  • 各attributeの順番も(ものによっては)大事なようで、とりあえずこの順番に落ち着きました。


実行結果:

ユーザがアップロードしたファイル

ここから"e"を入力した状態:履歴に表示されている範囲以前の検索データであるelevenが候補に上がってます。

ユーザがアップロードしたファイル

以上、ご参考まで。

2018/02/10 04:11

返信 参考になった

2018/02/10 07:54 Hiro.S への返信 Hiro.S への返信

たしかにそうですね、と返信しようとしたところ

ToMiさんから返信が。

ToMiさんから紹介していただいたコード入力したところ、

表示されました。

ユーザがアップロードしたファイル


推測ですが、ある一定のバージョンからはautosave="saved-qt"

が必要なのかもしれません。

いえいえ、原因を絞るために非常に有益でした。

2018/02/10 07:54

返信 参考になった

2018/02/10 08:03 ToMi への返信 ToMi への返信

いろいろ試してくださりありがとうございます。

<input type="search" tagindex="2" name="qt" autosave="saved-qt" size="31" maxlength="255" autocomplete="on" results="10">

どおりに記述したところ、検索履歴が再現されました。

ユーザがアップロードしたファイル

autocompleteを記述しなくても、resultsだけで履歴バーはでてきたので、autosave

の追記が一番大きいのかもしれません。それにしても、ブラウザ独自の属性がある

とは、今回みなさんに伺うまでは検討もつきませんでした。(そして統一性がないのは

面倒だ。。。)


再現することができ、スッキリしました。ありがとうございます。

2018/02/10 08:03

返信 参考になった

2018/02/10 11:09 ToMi への返信 ToMi への返信

ToMi さん

なるほど。Safari のバージョンにより挙動が異なることが分かり勉強になりました。ありがとうございます。


m3r2y11 さん

履歴が表示されてよかったですね。

2018/02/10 11:09

返信 参考になった
ユーザのユーザプロフィール: m3r2y11

質問: Safari11.0のinput type=searchタグ対応について