html - working - input browser autocomplete




如何在Web表單字段/輸入標記上禁用瀏覽器自動完成? (20)

Chrome的解決方案是在輸入類型密碼中添加autocomplete="new-password"

例:

<form name="myForm"" method="post">
<input name="user" type="text" />
<input name="pass" type="password" autocomplete="new-password" />
<input type="submit">
</form>

如果找到一個類型為密碼的框,則Chrome始終會自動填充數據,這足以指示該框為autocomplete = "new-password"

這對我很有用。

注意:請確保F12您的更改生效,很多時候瀏覽器將頁面保存在緩存中,這給我的印像是它不起作用,但瀏覽器實際上沒有帶來更改。

如何在主要瀏覽器中禁用特定input (或form field )的autocomplete


Firefox 30忽略密碼的autocomplete="off" ,選擇提示用戶改為是否應將密碼存儲在客戶端上。 請注意2014年5月5日的以下commentary

  • 密碼管理器始終提示是否要保存密碼。 未經用戶許可,不會保存密碼。
  • 在IE和Chrome之後,我們是第三個實現此更改的瀏覽器。

根據Mozilla開發人員文檔 ,表單元素屬性autocomplete可防止表單數據在舊版瀏覽器中緩存。

<input type="text" name="foo" autocomplete="off" />

只需設置autocomplete="off" 。 這樣做有一個很好的理由:您想提供自己的自動完成功能!


嘗試添加

readonly onfocus =“this.removeAttribute('readonly');”

此外

自動填充=“關閉”

對於您不想記住表單數據( usernamepassword等)的輸入,如下所示:

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>


更新:以下是基於此方法的完整示例,可防止拖放複製粘貼等。

<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

測試了主流瀏覽器的最新版本,即Google ChromeMozilla FirefoxMicrosoft Edge等,並且沒有任何問題。 希望這可以幫助...


在這次談話中,沒有一個解決方案適合我。

我終於找到了一個純HTML解決方案不需要Javascript ,在現代瀏覽器中工作(IE除外;至少有一個捕獲,對嗎?),並且不要求你禁用整個表單的自動完成。

只需關閉form上的自動完成功能,然後將其打開,即可在表單中使用任何input 。 例如:

<form autocomplete="off">
    <!-- these inputs will not allow autocomplete and chrome 
         won't highlight them yellow! -->
    <input name="username"  />
    <input name="password" type="password" />
    <!-- this field will allow autocomplete to work even 
         though we've disabled it on the form -->
    <input name="another_field" autocomplete="on" />
</form>

大多數主流瀏覽器和密碼管理器(正確地,恕我直言)現在忽略autocomplete=off

為什麼? 許多銀行和其他“高安全性”網站為了安全目的將autocomplete=off添加到他們的登錄頁面,但這實際上降低了安全性,因為它導致人們更改這些高安全性站點上的密碼以便於記憶(並因此破解) )因為自動完成被破壞了。

很久以前,大多數密碼管理器開始忽略autocomplete=off ,現在瀏覽器開始只對用戶名/密碼輸入做同樣的事情。

遺憾的是,自動完成實現中的錯誤會將用戶名和/或密碼信息插入到不適當的表單字段中,從而導致表單驗證錯誤,或者更糟糕的是,意外地將用戶名插入到用戶有意留空的字段中。

什麼是Web開發人員?

  • 如果您可以自己保留頁面上的所有密碼字段,那麼這是一個很好的開始,因為密碼字段的存在似乎是用戶/通行證自動完成啟動的主要觸發器。否則,請閱讀以下提示。
  • Safari注意到在這種情況下有2個密碼字段並禁用自動完成,假設它必須是更改密碼表單,而不是登錄表單。 因此,請確保為您允許的任何表單使用2個密碼字段(新的並確認新的)
  • 不幸的是, Chrome 34會在看到密碼字段時嘗試使用user / pass自動填充字段。 這是一個非常糟糕的錯誤,希望它們會改變Safari的行為。 但是,將此添加到表單頂部似乎禁用密碼自動填充:

    <input type="text" style="display:none">
    <input type="password" style="display:none">
    

我還沒有徹底調查IE或Firefox,但如果其他人在評論中有信息,我將很樂意更新答案。


對字段使用非標準名稱和id,因此而不是“name”具有“name_”。 然後瀏覽器不會將其視為名稱字段。 關於它的最好的部分是你可以對一些但不是所有字段執行此操作,它將自動完成一些但不是所有字段。


您可以在輸入中使用。

例如;

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}

我不得不乞求與那些避免禁用自動完成的答案不同。

提出的第一件事是,在登錄表單字段上未明確禁用自動完成是PCI-DSS失敗。 此外,如果用戶的本地計算機受到威脅,則攻擊者可以輕易獲得任何自動完成數據,因為它以明文形式存儲。

肯定存在可用性的爭論,但是當涉及到哪些表單字段應該禁用自動完成時哪些不應該存在時,存在非常好的平衡。


我們確實在一個網站上使用了sasb的想法。 這是一個運行醫生辦公室的醫療軟件網絡應用程序。 然而,我們的許多客戶都是使用許多不同工作站的外科醫生,包括半公共終端。 因此,他們希望確保醫生不了解自動保存的密碼或不注意密碼的含義,不會意外地使他們的登錄信息易於訪問。 當然,這是在私人瀏覽的概念開始出現在IE8,FF3.1等之前。即便如此,許多醫生被迫在醫院中使用舊的學校瀏覽器,其IT不會改變。

因此,我們讓登錄頁面生成隨機字段名稱,該名稱僅適用於該帖子。 是的,它不太方便,但它只是讓用戶頭腦不關心不在公共終端上存儲登錄信息。


我通過使用隨機字符解決了谷歌Chrome的無休止的爭鬥。

<input type=text name="test" autocomplete="off" />

希望它能幫助其他人。


據報導,我不敢相信這仍是一個問題。 以上解決方案對我來說不起作用,因為safari似乎知道元素何時沒有顯示或屏幕外,但以下對我有用:

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

希望對某人有用!


有時即使autocomplete = off不會阻止將憑據填入錯誤的字段,但不會阻止用戶或暱稱字段填寫

此解決方法是apinstein關於瀏覽器行為的帖子的補充。

將瀏覽器自動填充修復為只讀並在焦點上設置可寫(單擊和選項卡)

 <input type="password" readonly  
     onfocus="this.removeAttribute('readonly');"/>

更新:Mobile Safari將光標設置在字段中,但不顯示虛擬鍵盤。 New Fix像以前一樣工作,但處理虛擬鍵盤:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

現場演示https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

因為瀏覽器自動將憑據填充到錯誤的文本字段!?

當有相同形式的密碼字段時,我注意到Chrome和Safari上的這種奇怪行為 我猜,瀏覽器會查找密碼字段以插入您保存的憑據。 然後它會自動填充(只是因為觀察而猜)最近的textlike-input字段,它出現在DOM中的密碼字段之前。 由於瀏覽器是最後一個實例,您無法控制它,

上面的readonly-fix對我有用。


正如其他人所說,答案是autocomplete="off"

但是,我認為值得說明為什麼在某些情況下使用它是一個好主意,因為對此的一些答案和duplicate問題表明最好不要關閉它。

停止存儲信用卡號的瀏覽器不應留給用戶。 太多的用戶甚至都不會意識到這是一個問題。

在信用卡安全代碼的字段上關閉它尤為重要。 正如此頁面所述:

“永遠不要存儲安全代碼......它的價值取決於這樣一種假設:提供它的唯一方法是從實體信用卡中讀取它,證明提供它的人實際上持有了這張卡。”

問題是,如果它是公共計算機(網吧,圖書館等),那麼其他用戶很容易竊取您的卡詳細信息,甚至在您自己的機器上,惡意網站也可能竊取自動填充數據


添加autocomplete="off"不會削減它。

將輸入類型屬性更改為type="search"
Google不會對使用某種搜索類型的輸入應用自動填充功能。


為了避免無效的XHTML,您可以使用javascript設置此屬性。 使用jQuery的示例:

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

問題是沒有javascript的用戶會獲得自動完成功能。


這是瀏覽器現在忽略的安全問題。 瀏覽器使用輸入名稱識別和存儲內容,即使開發人員認為信息敏感且不應存儲。 在2個請求之間輸入名稱不同將解決問題(但仍將保存在瀏覽器的緩存中,並且還會增加瀏覽器的緩存)。 要求用戶在其瀏覽器設置中激活或取消激活選項不是一個好的解決方案。 問題可以在後端修復。

這是我的修復。 我在我的框架中實現的方法。 使用隱藏的輸入生成所有自動完成元素,如下所示:

<? $r = rmd5(rand().mocrotime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<? echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<? echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

然後服務器處理這樣的post變量:

foreach ($_POST as $key => $val)
{
    if(preg_match('#^__autocomplete_fix_#', $key) === 1){
        $n = substr($key, 19);
        if(isset($_POST[$n]))$_POST[$val] = $_POST[$n];
    }
}

可以照常訪問該值

var_dump($_POST['username']);

並且瀏覽器將無法建議先前請求或先前用戶的信息。

所有的工作都像魅力,即使瀏覽器更新,也想忽略自動完成。 這是解決這個問題的最好方法。


遊戲有點晚了......但我剛遇到這個問題並嘗試了幾次失敗,但是這個問題適用於我在MDN找到的

在某些情況下,即使autocomplete屬性設置為off,瀏覽器也會繼續建議自動完成值。 對於開發人員來說,這種意想不到的行為非常令人費解 真正強制無法完成的技巧是為屬性分配一個隨機字符串,如下所示:

autocomplete="nope"

這是一種非標準的方式(我認為Mozilla和Internet Explorer仍然支持它)但是弄亂用戶的期望是一個壞主意。

如果用戶在表單中輸入他們的信用卡詳細信息,然後讓其他人使用該瀏覽器,則不是您的擔憂。 :)


這裡提到的黑客都沒有在Chrome中為我工作。這裡有一個關於這個問題的討論:https://code.google.com/p/chromium/issues/detail?id=468153#c41https://code.google.com/p/chromium/issues/detail?id=468153#c41

<form>作品中添加這個(至少現在):

<input type="text" name="UserName" style="text-transform:lowercase;" placeholder="Username" 
    autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" 
    oncopy="return false" ondrag="return false" ondrop="return false" 
    onpaste="return false" oncontextmenu="return false" > 

<input type="password" name="Password" placeholder="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" oncopy="return false" ondrag="return false" 
    ondrop="return false" onpaste="return false" oncontextmenu="return false" >




autocomplete