☰

動的に生成されたフォームのブラウザネイティブオートコンプリート（Ajaxで処理） 質問する

tag-icon • tag-icon javascript html autocomplete
動的に生成されたフォームのブラウザネイティブオートコンプリート（Ajaxで処理） 質問する

フォームを動的に生成しています。簡単にするために、電子メール/パスワードを入力するログイン フォームであると仮定します。フォームは送信されますが、送信時に実際のログインを処理する AJAX リクエストが起動され、送信イベントはキャンセルされます ( e.preventDefault())。

e.preventDefault()フォームのデフォルトのアクションをキャンセルするために使用します。「アクション」のページへ移動しかし、これによりブラウザのオートコンプリート検出もキャンセルされるようです。

ネイティブのオートコンプリートが機能するには、いくつかの要件を満たす必要があると思います。

  • 入力フィールドtype="text"にはname
  • フォームを送信する必要があります<-- 私の場合は実際にはそうではありません

私の分析は正しいでしょうか、またこの場合にオートコンプリートを機能させる方法はありますか?

ファンボーイを遠ざけるために：私は、jQueryまたは[フレームワークを挿入]ブラウザのネイティブオートコンプリート機能を使いたいのですが、オートコンプリートしたい単語のリストがありません。

ベストアンサー1

OK、これを行う複雑な方法を見つけました:

これが JavaScript です:

function ajaxit() {
    var iFrameWindow = document.getElementById("myframe").contentWindow;
    iFrameWindow.document.body.appendChild( document.getElementById("myform").cloneNode(true));   
    var frameForm = iFrameWindow.document.getElementById("myform");
    frameForm.onsubmit = null;
    frameForm.submit();
    return false;
}

以下は HTML です:

<form id="myform" onsubmit="return ajaxit();" autocomplete="on">
    <input id="foo" name="foo"/> 
    <input type="submit" />
</form>
<iframe id="myframe" src=""></iframe> <!-- you'll want this hidden -->

[送信] をクリックすると、ajaxit() メソッドが実行されます。このメソッドは、iframe 内に同じフォームを作成し、それをサーバーに送信します。その送信を利用してサーバー リクエストを実行することも、別の ajax リクエストを実行して iframe を無視することもできます。

醜いのは分かっていますが、効果はあります。

編集：ここにjsbinで遊ぶ。

おすすめ記事