我正在編寫一個帶有三個文本輸入的非常簡單的Web應用程序。輸入用於生成結果，但所有工作都是使用Javascript完成的，因此不需要提交表單。我試圖找到一種方法讓瀏覽器存儲自動完成的輸入值，就像它們在提交的表單中一樣。無需提交表單即可觸發自動填充

我已經嘗試手動給出輸入autocomplete =「on」，但沒有提交表單，瀏覽器無法知道應該何時存儲這些值，所以這沒有任何作用。

我也嘗試用onSubmit =「return false;」的形式包裝輸入，但是阻止表單實際提交也會阻止瀏覽器存儲其輸入值。

當然可以手動使用localStorage或cookie來保存輸入，然後從這些輸入生成自動完成提示，但我希望找到一種解決方案，可以切換到本地瀏覽器行爲，而不是手動複製它。

來源

2013-03-17 AmericanUmlaut

不確定如果我正確理解問題。這是否意味着您將在瀏覽器中加載信息，以便javascript將使用三個輸入框中的信息在一些預加載的數據中執行查找？我看到的一些自動完成實現使用Ajax加載結果。這不適合你的模型，是嗎？ – VKen 2013-03-19 22:14:43

在這裏，嘗試一個類似的問題提供的解決方案：http://stackoverflow.com/questions/8400269/browser-native-autocomplete-for-ajaxed-forms – sweetamylase 2013-03-19 22:23:30

@Ven我只是希望瀏覽器對待輸入，就好像他們是已提交表單的一部分，因爲用戶將看到他們以前輸入的值作爲自動填充建議，而不實際提交表單。 – AmericanUmlaut 2013-03-20 07:36:38

測試了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()（從評論更新）

您需要在/內容返回一個空白頁/空白得到&後（約：空白並沒有爲我，但情況因人而異工作）。

來源

2013-03-26 10:06:32 laktak

只是一個說明，沒有必要定義一個內容/空白URL點iframe和form--將屬性定義爲about：blank對我來說工作正常。 – AmericanUmlaut 2013-03-26 19:35:02

僅供參考，這沒有爲我工作（也許是因爲我嘗試從鉻擴展頁）。我稍微修改了它，它確實有效：爲提交按鈕（稱爲「mySubmit」）設置可識別的類，然後代替$（「form」）。submit（）do $（「。mySubmit」）。click（）。 – 2014-03-20 04:37:16

+1，但如果使用'$（「form」）。submit（）;'，你不得不使用例如'$（「＃submit_button」）。click（）' – Legionar 2014-06-16 12:51:13

我還沒有測試過這個，但它可能工作，如果你提交表單到一個隱藏的iframe（以便表單實際提交，但當前頁面不重新加載）。

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

<form target="my_iframe" action="about:blank" method="get">...</form>

來源

2013-03-19 22:21:18 Alex

The解決方案爲我工作（在鉻43測試）。 – blazkovicz 2015-06-05 14:45:11

從我的搜索..看來你需要確定名稱。一些標準名稱，如'名稱'，'電子郵件'，'電話'，'地址'會自動保存在大多數瀏覽器中。

那麼，問題是，瀏覽器處理這些名稱differenetly。例如，這裏是鍍鉻的正則表達式：

名字：「第一個*名稱|縮寫| FNAME |第一個$。」
電子郵件：「e.?mail」
地址（1號線）：「地址*線|地址1 | ADDR1 |街」
郵政編碼：「拉鍊|郵政|交*代碼| P碼|^1Z $」

而Chrome也使用x-autocompletetype，所以你可以自定義名稱，並把一個自動完成類型，但我相信這不適用於自定義域..

Here is chrome's experiment

這是IE，Opera和Mozilla中的另一件事。現在，您可以在那裏嘗試iframe解決方案，以便您可以提交它。（也許這是半標準的）

嗯，這就是我可以幫助的。

來源

2013-03-21 23:59:00 aIKid

也許你可以使用Twitter Typeahead ...是一個非常完整的自動完成實現，具有本地和遠程預取，並且這使用localStorage來保存結果，並且它在輸入元素中顯示提示...代碼很容易理解，如果你不想使用完整的jQuery插件，我想你可以看看代碼，看看如何實現你想要的東西...

來源

2013-03-25 08:47:45 IJMorgado

沒有提交Twitter Typeahead超過一年....也許https://select2.github.io/是任何好的... – matanster 2016-05-24 16:53:21

你可以使用jQuery當聚焦和聚焦時，在本地存儲中保留自動完成數據自動完成到保留的值。

即

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

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

您還可以根據您的應用程序要求綁定其他事件的持久性邏輯。

來源

2013-03-26 08:36:24

-1

確保您通過POST提交表單。如果您通過ajax提交，請執行<form autocomplete="on" method="post">，省略action屬性。

來源

2014-07-09 22:09:36

我們知道，瀏覽器會保存其信息只有當表單提交，這意味着我們不能return false或e.preventDefault()

我們所能做的就是讓它數據提交取消它無處無需重新加載頁面。我們可以做到這一點的iframe

<iframe name="" style="display:none" src="about:blank"></iframe> 

<form target="" action="about:blank"> 
    <input name="user"> 
    <input name="password" type="password"> 
    <input value="Login" type="submit"> 
</form>

Demo on JSfiddle (tested in IE9, Firefox, Chrome)

優點在目前接受的答案：

短代碼;
沒有jQuery;
沒有加載服務器端頁面;
沒有額外的JavaScript;
無需額外的課程。

沒有額外的JavaScript。您通常會附加處理程序到表單的submit事件發送XHR和不取消它。

JavaScript示例

// for modern browsers with window.fetch 
document.forms[0].addEventListener('submit', function() { 
    window.fetch('login.php', { 
     method: 'post', 
     body: new FormData(document.forms[0])) 
    }).then(function() { /* login completed */ }) 
    // no return false!! 
});

無JavaScript的支持

理想情況下，你應該讓不支持JavaScript的形式工作太多，所以刪除target和設定的動作，將收到您的表單的頁面數據。

<form action="login.php">

，然後簡單地通過JavaScript添加它，當你添加submit事件：

formElement.target = ''; 
formElement.action = 'about:blank';

來源

2015-04-27 01:48:01

對於那些誰不願意改變他們現有的表單功能，您可以用第二種形式接收的副本所有表單值，然後在主表單提交之前提交到空白頁面。這是一個使用JQuery Mobile演示解決方案的完全可測試的HTML文檔。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 
    <form method="post"> 
     <input type="text" name="email" /> 
     <input type="submit" value="GO" onclick="save_autofill(this);" /> 
    </form> 


    <script> 
     function save_autofill(o) { 
      $(':input[name]', $('#hidden_form')).val(function() { 
       return $(':input[name=' + this.name + ']', $(o.form)).val(); 
      }); 

      $('#hidden_form').find("input[type=submit]").click(); 
     } 
    </script> 

    <iframe name="hidden_iframe" style="display:none"></iframe> 
    <form target="hidden_iframe" id="hidden_form" action="about:blank" style="display:none"> 
     <input type="text" name="email" /> 
     <input type="submit" /> 
    </form> 
</body> 
</html>

save_autofill函數只需要在您的主窗體提交按鈕上調用。如果您有提交表單的腳本功能，請在撥打電話save_autofill後撥打該電話。您的主窗體中的每個窗體都必須有hidden_form的命名文本框。

如果您的網站使用SSL，那麼您必須更改about:blank的網址爲https://about:blank。

來源

2015-06-01 22:49:30

https：// about：blank確實需要在Firefox中避免一些警告。我想知道是否有其他選項沒有這個問題。也許javascript：void（0）？另外，提交另一個表單是否真的增加了瀏覽器對所有表單的自動完成？ – marcus 2017-02-21 12:57:42

-1

你可以使用「。」在iframe src和表單動作中。

<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-09 07:10:23

無需提交表單即可觸發自動填充

回答

JavaScript示例

無JavaScript的支持

相關問題