2012-06-07 3 views
35

Как отключить функцию автозаполнения Chrome на определенных <input> с, чтобы они не были автоматически заполнены при загрузке страницы?Отключить автозаполнение формы в Chrome без отключения автозаполнения

В то же время мне нужно включить автозаполнение, поэтому пользователь все еще может видеть список предложений, нажимая на ввод или введя его. Это можно сделать?

EDIT: Не стесняйтесь использовать простой Javascript или jQuery, если вы считаете, что это необходимо или вы чувствуете, что это упростит ваше решение.

+0

Возможно (потому что он не может позволить _любой_ действия автозаполнения), связанных с: http://stackoverflow.com/questions/2999578/how-do-i-stop-chrome-from-pre-populating -input-boxes – MetalFrog

+0

Я попробовал 'autocomplete =" off "', и он остановил браузер от автозаполнения входов при загрузке страницы, но также не позволил предложениям подняться, когда я набрал или нажал на входах. Я попробовал 'value =" "' и другие подобные вещи, и он ничего не делал. Я попытался удалить атрибут value и ничего не сделал. –

+0

Я пробовал называть поле другим, но в моей ситуации было бы сложно сохранить работу на сервере, если я это сделаю. –

ответ

1

Одним из решений было бы автоматическое заполнение ввода пробельными символами и их четкое фокусирование.

Пример: http://nfdb.net/autofill.php

<!doctype html> 
<html> 
    <head> 
     <title>Autofill Test</title> 
     <script> 
      var userfield; 

      // After the document has loaded, manipulate DOM elements. 
      window.addEventListener('load', function() { 

       // Get the username field element. 
       userfield = document.getElementById('user'); 

       // Listen to the 'focus' event on the input element. 
       userfield.addEventListener('focus', function() { 

        // Checks if the value is the EM space character, 
        // and removes it when the input is recieves focus. 
        if (this.value == '\u2003') this.value = '' 

       }, false); 

       // Listen to the 'blur' event on the input element. 
       // Triggered when the user focuses on another element or window. 
       userfield.addEventListener('blur', function() { 

        // Checks if the value is empty (the user hasn't typed) 
        // and inserts the EM space character if necessary. 
        if (this.value == '') this.value = '\u2003'; 

       }, false); 
      }, false); 
     </script> 
    </head> 
    <body> 
     <form method="GET" action=""> 
      <input id="user" name="username" type="text" value="&#8195;"/><br/> 
      <input name="password" type="password" value=""/><br/> 
      <input type="submit" value="Login"> 
     </form> 
    </body> 
</html> 

Это должно остановить браузер от автоматического заполнения полей, но все же позволяют им автозаполнения.

Вот еще один пример, который очищает входы формы после загрузки страницы. Преимущество этого метода заключается в том, что входы никогда не имеют в них каких-либо пробельных символов, недостатком является то, что существует небольшая вероятность того, что значения автозаполнения могут быть видны в течение нескольких миллисекунд.

http://nfdb.net/autofill2.php

<!doctype html> 
<html> 
    <head> 
     <title>Autofill Test</title> 
     <script> 
      var userfield, passfield; 

      // Wait for the document to load, then call the clear function. 
      window.addEventListener('load', function() { 

       // Get the fields we want to clear. 
       userfield = document.getElementById('user'); 
       passfield = document.getElementById('pass'); 

       // Clear the fields. 
       userfield.value = ''; 
       passfield.value = ''; 

       // Clear the fields again after a very short period of time, in case the auto-complete is delayed. 
       setTimeout(function() { userfield.value = ''; passfield.value = ''; }, 50); 
       setTimeout(function() { userfield.value = ''; passfield.value = ''; }, 100); 

      }, false); 
     </script> 
    </head> 
    <body> 
     <div>This form has autofill disabled:</div> 
     <form name="login" method="GET" action="./autofill2.php"> 
      <input id="user" name="username" type="text" value=""/><br/> 
      <input id="pass" name="password" type="password" value=""/><br/> 
      <input type="submit" value="Login"> 
     </form> 
     <div>This form is untouched:</div> 
     <form name="login" method="GET" action="./autofill2.php"> 
      <input name="username" type="text" value=""/><br/> 
      <input name="password" type="password" value=""/><br/> 
      <input type="submit" value="Login"> 
     </form> 
    </body> 
</html> 
+0

Я готов рассмотреть это, хотя я беспокоюсь, что это может вызвать проблемы, если кто-то хочет на самом деле ввести «» в качестве значения. –

+1

Вы можете использовать разные символы пробелов. Например, пространство EM. В качестве примера я просто использовал обычные пробелы. – Nimphious

+0

Я обновил пример, чтобы быть более хром-дружественным, и использовать пространство EM. – Nimphious

-1

автозаполнение работает с атрибутом имени входа, так что если вы установите имя для входа, как «FirstName», хром заполнит его.

Если вы хотите отключить его, используйте нечетное имя, например «supermanname».

Javascript не может решить вашу проблему.

Второе решение: вы можете скрыть свои входы с одинаковыми именами и установить их значения другими входами. Я упростил Js с помощью jquery.

<form action="handlerfile.php" method="post"> 
<input type="text" id="1" onclick="$("#2").val($("#1").val())"/> 
<input type="hidden" name="username" id="2"> 
</form> 
+0

Проблема в том, что OP хочет, чтобы только автозаполнение было отключено, они по-прежнему хотят, чтобы пользователь мог автоматически заполнить форму с ранее введенными данными. – Nimphious

+0

@Nimphious Я думаю, что это решение делает то, что вы описали. –

+0

Не так ли? Я не тестировал его, но не автозаполнение и автозаполнение не работают с атрибутом имени? Если это так, удаление атрибута name приведет к отключению обоих. – Nimphious

4

Я не могу получить мой Chrome автоматически автозаполнения при загрузке страницы, чтобы проверить это, но вы можете попробовать добавить autocomplete="off" ваших полей, с последующим удалением атрибута на нагрузке:

$(window).load(function() { // can also try on document ready 
    $('input[autocomplete]').removeAttr('autocomplete'); 
}); 
+1

Это не полезно. Это отключает автозаполнение, но также отключает автозаполнение. См. Мой вопрос. –

+2

@ mikez302 Удаление атрибута автозаполнения восстанавливает автозаполнение, см. Http://jsfiddle.net/jefferyto/fhT9m/. Возможно, вы можете попробовать его до начала опрокидывания. –

+0

Кажется, работает на меня! – Willem

2

Это может помочь: https://stackoverflow.com/a/4196465/683114

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { 
    $(window).load(function(){ 
     $('input:-webkit-autofill').each(function(){ 
      var text = $(this).val(); 
      var name = $(this).attr('name'); 
      $(this).after(this.outerHTML).remove(); 
      $('input[name=' + name + ']').val(text); 
     }); 
    }); 
} 

похоже на нагрузку, он находит все входы с автозаполнения, добавляет их outerHTML и удаляет оригинал, в то время как preserv ИНГ значение и имя (легко изменить, чтобы сохранить идентификатор и т.д.)

Если это сохраняет текст автозаполнения, вы можете просто установить

var text = ""; /* $(this).val(); */ 

Из оригинальной формы, где это был размещен, он утверждает, что сохранение автозаполнения. :)

Удачи вам!

+0

Кажется, что автозаполнение включено. Это просто помешало фону ввода стать желтым, как обычно, с автозаполнением. –

0

Немного поздно на вечеринку ...но это легко сделать с некоторыми JQuery:

$(window).on('load', function() { 
    $('input:-webkit-autofill').each(function() { 
     $(this).after($(this).clone(true).val('')).remove(); 
    }); 
}); 

Pros

  • Удаляет автозаполнения текста и цвет фона.
  • Сохраняет автозаполнение на поле.
  • Сохраняет любые события/данные, связанные с элементом ввода.

Против

  • Быстрая вспышка autofilled поля на странице загрузки.
41

Немного поздно, но вот мое решение для проверки дурака полезно для таких страниц, как страница регистрации/регистрации, где пользователь должен ввести новый пароль.

<form method="post"> 
    <input type="text" name="fname" id="firstname" x-autocompletetype="given-name" autocomplete="on"> 
    <input type="text" name="lname" id="lastname" x-autocompletetype="family-name" autocomplete="on"> 
    <input type="text" name="email" id="email" x-autocompletetype="email" autocomplete="on"> 
    <input type="password" name="password" id="password_fake" class="hidden" autocomplete="off" style="display: none;"> 
    <input type="password" name="password" id="password" autocomplete="off"> 
</form> 

Хром обнаружит два ввода пароля и не будет автоматически заполнять поля пароля. Однако поле id = "password_fake" будет скрыто через CSS. Таким образом, пользователь будет видеть только одно поле пароля.

Я также добавил некоторые дополнительные атрибуты «x-autocompletetype», который представляет собой специальную функцию автоматического заполнения хрома. В моем примере хром будет автозаполнять имя, фамилию и адрес электронной почты, а не поле пароля.

+0

Только решение работает для меня. – einstein

+2

Беспощадно, но по крайней мере это сработало. Интересно, что у меня также есть 'autocomplete =" off ", установленный в этой форме, и хотя это работало в Firefox, этого было недостаточно для Chrome (возможно, по уважительной причине) (http://security.stackexchange.com/questions/49326/должны-сайты-быть разрешено к Disable-автозаполнения-на-форм или полей)). – Brilliand

8

Я наткнулся на странное поведение автозаполнения хрома сегодня. Это случилось, чтобы включить в поля, называемые «embed» и «postpassword» (заполняя логин и пароль) без видимых причин. Эти поля уже автозаполнялись.

Ни один из описанных методов, казалось, не работал. Ни один из методов из другого ответа не работал. Я пришел на мою собственную идею базирование на ответ Стила (это, возможно, на самом деле работал, но я требовать фиксированный формат отправки данных в моем приложении):

перед реальным паролем, добавьте эти две фиктивные поля:

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

Только этот, наконец, полностью отключил автозаполнение для моей формы.

Жаль, что отключение такого базового поведения является трудным и взломанным.

0
var fields = $('form input[value=""]'); 
fields.val(' '); 
setTimeout(function() { 
    fields.val(''); 
}, 500); 
1

Я недавно столкнулся с этой проблемой, и не простым решением, так как мои поля могут быть заполняемыми, я хотел бы поделиться элегантной хак я придумал, установив пароль типа в готовом случае.

Не объявить поле ввода в качестве типа пароля при его создании, но добавить готовый слушатель событий, чтобы добавить его для вас:

function createSecretTextInput(name,parent){ 
    var createInput = document.createElement("input"); 
    createInput.setAttribute('name', name); 
    createInput.setAttribute('class', 'secretText'); 
    createInput.setAttribute('id', name+'SecretText'); 
    createInput.setAttribute('value', 'test1234'); 

    if(parent==null) 
     document.body.appendChild(createInput); 
    else 
     document.getElementById(parent).appendChild(createInput); 

    $(function(){ 
     document.getElementById(name+'SecretText').setAttribute('type', 'password'); 
    }); 
}; 

createSecretTextInput('name', null); 

http://jsfiddle.net/

0

Это далеко я нашел это работает, чтобы установить тайм-аут 1 мс для завершения действия после автозаполнения хрома ..

$(window).on('load', function() { 
    setTimeout(function(){ 
     $('input[name*=email],input[name*=Password]').val('-').val(null); 
    },1); 
}); 

Я интересно, если есть какой-нибудь способ крепления этой функции хромы самостоятельного завершение стрельбы, или даже повторное объявление его

0

Chrome менеджер пароли ищет входные элементы с type="password" и заполнить сохраненный пароль , Он также игнорирует свойство autocomplete="off".

Вот исправление для последней Chrome (версия 40.0.2181.0 канарейки):

<input name="password"> 

JS:

setTimeout(function() { 
    var input = document.querySelector("input[name=password]"); 
    input.setAttribute("type", "password"); 
}, 0) 
+0

Что происходит, когда javascript не включен? Затем пароли пользователей видны для всех пиринговых глаз! О нет!! – StephenKelzer

+0

@StephenKelzer right, good point –

19

Fix: предотвратить браузер автозаполнение в

<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(); }" /> 

Live Demo https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

Объяснение Вместо заполнения пробелов или оконного под нагрузкой функций этот фрагмент работ путем установки режима readonly и изменения на запись, если пользователь фокусирует это поле ввода (фокус содержит щелчок мышью и табуляцию по полям).

Нет необходимости в jQuery, чистый JavaScript.

+0

Это обходит много странного эвристического хром-идиотизма ... большое спасибо! Это, наконец, не автозаполнение имени пользователя в поле поиска! –

11

После много борьбы, я обнаружил, что решение является гораздо более простое, что вы можете себе представить:

Вместо autocomplete="off" просто использовать autocomplete="false";)

Попробуйте это ...

$(document).ready(function() { 
    $('input').attr('autocomplete', 'false'); 
}); 
+0

Немного поздно, но ... Он отключает всю форму не только один вход – HFR1994

+0

@ HFR1994, вы можете исправить это, изменив его на $ ('input # password'). Attr ('autocomplete', 'false'); – Meelah

+0

@Meelah thumbs up, your right – HFR1994

1

autocomplete="off" на вход теперь работает на Chrome V44 (и Canary V47)

-4

Вы лучше использовать ди sabled для ваших входов, чтобы предотвратить автоматическое завершение.

<input type="password" ... disabled /> 
0

Самое простое решение, укажите значение '' для поля имени пользователя (которое вы все равно можете назвать «username»).

Если значение может быть заселенно пользователем вводятся значениями, как это обычно бывает в форме, вы проверяющая, обеспечивает значение «», когда он еще не установлен. В PHP

if(trim($username) == ''){$username = ' ';} 

<input type='text' value = '$username' name = 'Username' /> 

Я на самом деле думаю, что автодополнение для имени пользователя и пароля эффективен подарки доступ ко всем вашим счетам к любому, кто имеет доступ вашего компьютера, независимо от того, насколько неясных ваших паролей ...

0

Мое решение основано на пользовательском решении dsuess, которое не работает в IE для меня, потому что я должен был щелкнуть еще раз в текстовом поле, чтобы иметь возможность ввода. Поэтому я адаптировал его только к Chrome:

$(window).on('load', function() { 
    if (navigator.userAgent.indexOf("Chrome") != -1) { 
     $('#myTextBox').attr('readonly', 'true'); 
     $('#myTextBox').addClass("forceWhiteBackground"); 
     $('#myTextBox').focus(function() { 
      $('#myTextBox').removeAttr('readonly'); 
      $('#myTextBox').removeClass('forceWhiteBackground'); 
     }); 
    } 
}); 

В вашем CSS добавить следующее:

.forceWhiteBackground { 
    background-color:white !important; 
} 
48

Вот магия вы хотите:

autocomplete="new-password" 

Ch rome намеренно игнорирует autocomplete="off" и autocomplete="false". Тем не менее, они ставят new-password в качестве специального предложения, чтобы остановить автоматическое заполнение новых форм пароля.

Я поместил указанную выше строку в свой пароль, и теперь я могу редактировать другие поля в моей форме и пароль не автозаполняется.

+4

Это правильное решение, если ваша цель - предотвратить автозаполнение пароля. –

+0

С точки зрения удобства использования и доступности это единственное приемлемое решение. – Thomas

+0

но wint new-password iirc также убивает автозаполнение? в названии говорилось, что это явно не должно произойти. – My1

0

Вот последнее решение, которое я обнаружил. Это останавливает Google, заполняя поля и выделяя их желтым, прежде чем вы даже набрали что-либо. В принципе, если вы поместите «display: none» в поле Google, достаточно умный, чтобы игнорировать его и перейти к следующему полю. Если вы поместите «видимость: скрытый», хотя он считает это полем в форме, которая, кажется, вмешивается в его вычисления. Нет необходимости в javascript.

<form method='post'> 
    <input type='text' name='u' size='16'/> 
    <input type='password' name='fake' size='1' style='width:1px;visibility:hidden'/><br /> 
    <input type='password' name='p' size='16'/> 
</form> 
0

Я не люблю использовать setTimeout или даже иметь странные временные входы. Так что я придумал это.

Просто изменить тип поля пароля к тексту

<input name="password" type="text" value=""> 

И когда пользователь фокус, что изменение ввода его снова пароль

$('input[name=password]').on('focus', function (e) { 
    $(e.target).attr('type', 'password'); 
}); 

Сво работает с использованием последней Chrome (версия 54.0.2840.71 (64 -бит))

0

Не красивый раствор, но обработан на основе хрома 56:

<INPUT TYPE="text" NAME="name" ID="name" VALUE=" "> 
<INPUT TYPE="password" NAME="pass" ID="pass"> 

Обратите внимание на пробел по значению. И потом:

$(document).ready(function(){ 
    setTimeout("$('#name').val('')",1000); 
}); 
Смежные вопросы