jqgrid編集フォームはブラウザの自動入力機能を失います

Question

私は最近、この質問を投稿しました：jqgrid edit form autocomplete="off" by default, how to change to autocomplete="on"デフォルトでは、jqGrid編集フォームがすべての入力要素にautocomplete="off"属性を与えたことに気がついたからです。私はこれが、WebブラウザがjqGrid編集フォームのための通常の自動塗りつぶし機能を実装しない理由であると考えました。この問題を修正してすべての入力要素をautocomplete="on"属性にすると、jqGrid編集フォームの自動入力は行われません。

これらのフォームで自動入力が機能しない理由は誰にも分かりますか？フォームはajaxを介して提出されるので、これが影響を与えるかどうかはわかりません。

私はではありません。については、jQuery's autocomplete()です。私は現代的なWebブラウザ（Chrome、FF）について書いています。これは、フォームの自動入力機能に組み込まれています。

たとえば、私のjsfiddleサンプルフォームhereに行ってください。フォームに必要なものを入力してから、submitをクリックします。ページを更新してもう一度記入してください。あなたのブラウザにはが記憶されていて、最初に値が入力されたばかりのが示唆されています。これは私のために起こることです。

一方、jqGrid編集例hereに行くと、行を選択し、小さな編集ボタンをクリックします（鉛筆のように見えます）。最初のフィールドは変更できませんが、他のフィールドは変更できます。他のフィールドに任意の値を入力し、submitをクリックします。ページを更新してもう一度お試しください。私が多くのコンピュータとFFとChromeの両方から経験しているのは、このフォームはで、過去のエントリはであることを覚えていないということです。

これは問題です。同じことが起こっていますか？もしそうなら、これらのjqGridフォームをブラウザのオートフィル機能と互換性を持たせることが可能かどうか知っていますか？

ありがとうございます！

Answer 1

、それらはすべてに依存して正しい道にあなたを助けるかもしれませんフォームフィールド自体の値を格納するためにフォームが送信されます。 jqGridはAJAXを介してフォームを処理するため（更新ボタンは送信ボタンではなくリンクです）、フォーム自体は実際には送信されません。したがって、後で自動補完を使用するためにフィールド値をブラウザに保存することはできません。フィールドの値を格納するためにブラウザを強制する

一つの方法は、<iframe />にクローニング<form />を追加し、AJAXフォーム送信プロセスの一部として提出、<form />をクローン、<iframe />を作成することです。

たとえば、JSFiddleのこの変更版をとります。

上記の例では、 '標準フォーム'に記入して送信し、ページをリロードすると、フィールドは期待どおりに自動完成します。 'AJAXフォーム'を記入して提出し、ページをリロードすると、フィールドは自動完成されません。最後に、 'AJAX + iFrameフォーム'に記入して送信し、ページをリロードすると、フィールドは自動的に自動完成します。

注：上記の例は、Chrome、Safari、Firefoxでテストされています。 Your Milageは異なる場合があります。完全のために

、ここでのrelaventコードは次のとおりです。

$('#iframe_submit').bind('submit', function(e){ 
    e.preventDefault(); // Prevents Standard Submit 

    // Do AJAX Stuff Here... 

    // Create Clone of Form, Append to iFrame and Trigger Submit 
    // This Forces Autocomplete to Register 

    var $clone = $('#iframe_submit').clone(); 
     $clone.attr('id', 'iframe_clone'); // Only One ID Allowed 

     $('<iframe />').appendTo('body').contents().find('body').append($clone); 
     $('iframe').contents().find('#iframe_clone').submit(); 
    }); 

私はこれが役に立てば幸い！

Answer 2

あなたの問題から正確に見るためのコードがありますが。私はブラウザに依存して、ブラウザの制限のために完全に可能であるという前提に飛びます。だけでなく。それはいくつかの事の一つかもしれません。フォームの要素が<form></form>タグで囲まれていないかのいずれかであるため、オートコンプリートを有効にしているブラウザは、オートコンプリートしたい要素を認識できません。

2あなたの要素にはわかりにくい名前を使用してください。一般的にオートコンプリート対応のブラウザは、一般的に使用されるフォーム要素名の例（first_name、firstname、name、email、username、street1、street_oneなど）を探します。

3あなたのグリッドをjavascriptを使って文書のように機能させるように動的にロードすることは、完全に可能です。オートコンプリートはすでにページに自動完成するフォームがあるかどうかをチェックしています。そうであれば、ブラウザの自動完成機能がドキュメントの準備が整う前に実行されている可能性があります。このケースであることが判明した場合。これ掲示は、すべてのブラウザは、ストレージと若干異なる方法でフォームフィールドのオートコンプリートを処理しながら

が

jQuery AutoComplete Trigger Change Event