57

3 つのテキスト入力を持つ非常に単純な Web アプリを作成しています。入力は結果を生成するために使用されますが、すべての作業は Javascript で行われるため、フォームを送信する必要はありません。送信されたフォームにある場合と同様に、ブラウザにオートコンプリートの入力値を保存させる方法を見つけようとしています。

入力 autocomplete="on" を手動で与えようとしましたが、送信するフォームがないと、ブラウザーはいつ値を保存する必要があるかを知る方法がないため、これは効果がありません。

また、onSubmit="return false;" を含むフォームで入力をラップしようとしましたが、フォームが実際に送信されないようにすると、ブラウザーが入力値を保存できないようにも見えます。

もちろん、手動で localStorage または Cookie を使用して入力を保持し、それらからオートコンプリート ヒントを生成することは可能ですが、手動で複製するのではなく、ネイティブ ブラウザーの動作を利用するソリューションを見つけたいと考えています。

4

10 に答える 10

41

Chrome、IE、Firefox でテスト済み:

<iframe id="remember" name="remember" class="hidden" src="/content/blank"></iframe>

<form target="remember" method="post" action="/content/blank">
  <fieldset>
    <label for="username">Username</label>
    <input type="text" name="username" id="username" value="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" value="">
  </fieldset>
  <button type="submit" class="hidden"></button>
</form>

あなたのJavascriptで送信をトリガーします。$("form").submit(); $("#submit_button").click()（コメントから更新）

取得および投稿するには、/content/blank に空のページを返す必要があります (about:blank は私には機能しませんでしたが、YMMV には機能しませんでした)。

于 2013-03-26T10:06:32.443 に答える
5

これはテストしていませんが、フォームを非表示のiframeに送信すると機能する可能性があります（フォームは実際に送信されますが、現在のページは再読み込みされません）。

<iframe name="my_iframe" src="about:blank"></iframe>

<form target="my_iframe" action="about:blank" method="get">...</form>
于 2013-03-19T22:21:18.367 に答える
2

おそらく、このTwitter Typeaheadを使用できます...これは、ローカルおよびリモートのプリフェッチを備えたオートコンプリートの非常に完全な実装です。これは、localStorage を使用して結果を保持し、入力要素にヒントを表示します...コードは次のとおりです。理解しやすく、完全なjqueryプラグインを使用したくない場合は、コードを見て、目的を達成する方法を確認できると思います...

于 2013-03-25T08:47:45.607 に答える
1

jQuery を使用して、フォーカスアウト時とフォーカスイン時にオートコンプリート データをローカル ストレージに永続化して、永続化された値にオートコンプリートすることができます。

すなわち

$(function(){
 $('#txtElement').on('focusout',function(){
   $(this).data('fldName',$(this).val());
 }

 $('#txtElement').on('focusin',function(){
   $(this).val($(this).data('fldName'));
 }
}

アプリケーションの要件に応じて、他のイベントに永続化ロジックをバインドすることもできます。

于 2013-03-26T08:36:24.583 に答える
1

私が検索したものから..名前を特定する必要があるようです。「name」、「email」、「phone」、「address」などの標準的な名前は、ほとんどのブラウザで自動的に保存されます。

問題は、ブラウザがこれらの名前を異なる方法で処理することです。たとえば、クロムの正規表現は次のとおりです。

  • ファーストネーム: "first.*name|イニシャル|fname|first$"
  • 電子メール: 「電子メール」
  • 住所 (1 行目): "address.*line|address1|addr1|street"
  • 郵便番号: "zip|postal|post.*code|pcode|^1z$"

しかし、クロムも使用するautocompleteので、名前をカスタマイズしてオートコンプリートタイプを入れることができますが、これはカスタムフィールド用ではないと思います..

クロームのスタンダードはこちら

IE、Opera、Mozilla では別のことです。今のところ、iframe ソリューションをそこで試すことができますので、提出してください。（準標準的なものかもしれません）

まあ、それは私が助けることができるすべてです。

于 2013-03-21T23:59:00.347 に答える
-1

「。」を使用できます。iframe src と form アクションの両方で。

 <iframe id="remember" name="remember" style="display:none;" src="."></iframe>
 <form target="remember" method="post" action=".">
    <input type="text" id="path" size='110'>
    <button type="submit" onclick="doyouthing();">your button</button>
</form>
于 2016-12-09T07:10:23.497 に答える