Home > 技術 > 各ブラウザのオートコンプリート機能が働くパターンのまとめ and デモ

各ブラウザのオートコンプリート機能が働くパターンのまとめ and デモ

オートコンプリート機能は各ブラウザが搭載している機能ですが、ID・パスワードを保存するときに表示される保存ダイアログの挙動がよくわかっていなかったのでいろいろ試してみました。

基本的にはテキストボックスを2つ持つformがあり、このformを以下の4つのパターンでsubmitさせた場合に、保存ダイアログが表示されるのかされないのかの検証になります。

普通にsubmitボタンでsubmitする場合

ごくごく一般的なパターンで、IDとパスワードを入力するテキストボックスがあって、submit用のinput type="submit"なボタンが置いてあります。
submitボタンをクリックするとどのブラウザでも、保存ダイアログが表示されました。

リンク経由でJavaScriptからsubmitボタンでsubmitする場合

aタグをクリックしたタイミングで、submitボタンをJavaScriptからclickするパターンです。
JavaScriptから実行しているので、一見すると保存ダイアログが出ないかと思われますが、ちゃんと表示されます。

リンク経由でJavaScriptからform.submit();でsubmitする場合

今回の検証で唯一この方法だけが、うまく保存ダイアログが表示されない場合がありました。
IE7、8で試したら保存ダイアログが表示されずに画面遷移しちゃいました。

imageボタンでsubmitする場合

これは1つ目と似ていますが、input type="image"なボタンでsubmitするパターンです。
問題なく保存ダイアログが表示されました。

おまけ:autocomplete属性がoffでも保存ダイアログが出てしまう場合(つまりautocompleteに対応していない)

ブコメで

autocomplete=offとかの検証はないのかなー

とご意見をいただいたので、一応追記しときます。

autocomplete属性をoffにしてもダイアログが出ちゃうブラウザを調査しました。
結果的にはMacとWindowsのOperaが対応していなかったです。

■参考リンク
4.10.7.2 Common input element attributes -- HTML5 (Edition for Web Authors)


詳しくは以下のデモを参照ください!!
オートコンプリート機能が働くパターンのまとめ and デモ

以下いろいろ備忘録

formのactionで、index.htmlからindex2.htmlに遷移している理由

Chromeだとformのactionが現在開いている画面と同じURLの場合?に保存ダイアログが出なかった。
ゆえに、今回のデモではすべてindex2.htmlという2ページ目に遷移するようにしている。

Operaはどこにパスワードを保存してるの?

「環境設定→認証管理タブ→認証管理ボタン」

認証管理マネージャ.jpg

Google Chromeはどこにパスワードを保存してるの?

「環境設定→個人設定タブ→保存したパスワードを表示ボタン」

キーチェーンアクセス.jpg

つまりキーチェーンアクセスに保存されます。
オシャレですね〜!

Safariはどこにパスワードを保存してるの?

「環境設定→自動入力タブ→ユーザ名とパスワードの編集ボタン」

Safari.jpg

僕の環境だと保存したデータの削除を実行する「取り除く」というボタンが効かなかったです・・・ナンデだろう。

Firefoxはどこにパスワードを保存してるの?

「環境設定→セキュリティタブ→保存されているパスワードボタン」

保存されているパスワード.jpg


こんだけMac版とWindows版のブラウザを行き来するとワケがワカメになっちゃうよ...

■関連記事
Internet Explorer のオートコンプリートの動作について
オートコンプリート - Opera Wiki
過去に入力した物でオートコンプリートしたい - Opera Wiki
usoAutoCompleteFromHistory - 工房らくだ舎

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1265
Listed below are links to weblogs that reference
各ブラウザのオートコンプリート機能が働くパターンのまとめ and デモ from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > 各ブラウザのオートコンプリート機能が働くパターンのまとめ and デモ

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top