ダイナミックに生成されたフォーム（ajaxで処理される）のブラウザのネイティブオートコンプリート

Question

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

のページに移動してのページに移動しますが、ブラウザの自動補完の検出がキャンセルされるようです。これは実際にはない - <フォームを提出しなければならない

name

• あなたの入力フィールドtype="text"を持っている必要があります。

  私はネイティブのオートコンプリートが機能するためにあなたはいくつかの要件を気力する必要があると思います私の場合起こっています

私の分析は正しいですか？この場合、自動補完を行う方法はありますか？ファン達を追い払うために

---

：私はjQueryのかを必要とするすべてのソリューションを探していないよ[あなたの枠組みを挿入]、私はネイティブブラウザのオートコンプリート機能を使用したいです。私は自動完成させたい単語のリストを持っていません。

Answer 1

DMosesソリューションを大幅に私の解決策に影響を与えたが、それは大きな違いは、私は私の独自のソリューションを作るために良いアイデアだと思った、恵みはいえDMosesに行くがあります：P

DMoses液の移動（またはコピーが）フォームをiframeに送信し、それを送信します。あなたがこれをやりたい理由は、あなたの '親'がリロードしないからです。より簡単な解決策があります：は、iframeに送信するフォームを持っています。これはまったく同じで、ノードをコピーする必要はありません。

この手順も完全に再現可能です。唯一の欠点は、オートコンプリートエントリが正確に追加されたときを制御しないことです。 有効なのエントリだけを追加したいかもしれませんが、少なくともこの場合は、ajaxが含まれていないと正常なフォームの動作を完全に模倣しています。オートコンプリートに追加するものを制御するには、DMosesのソリューションを使用して、フォームをコピーしてiframeで送信します。

は私にとっては、これで十分です：

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

最良の部分：余分なJavaScriptを有効にして作業を行う必要はありません！（フォームの一意のID /名前を生成する以外は、それほど簡単ではありません）。

jsFiddle：http://jsfiddle.net/KzF6s/13/

Answer 2

[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があります。

Answer 3

他の回答の回避策についてのコメントでフィドルに少しいじりの後、私はブラウザはこれを正しく処理するのを待つことができます誰のために、このリストを作ることにしました。

ので、要約として、これらのブラウザのバージョンでは、JavaScriptで生成されたフォームのオートコンプリート値をサポートしています。

• FireFoxの25
• クロム33（現在のバージョンは31ですので、すぐに来て）
• Internet Explorer 11（reference）