html - password - Cómo deshabilitar el relleno automático en Safari 7

disable autocomplete chrome

Question

Estoy tratando de encontrar una manera de hacer que Safari 7 (probado con la versión 7.0.2, 7.0.3) respete los atributos autocomplete = "off". No importa lo que intente, sigue llenándose automáticamente.

Este es un problema para una de nuestras páginas de administración donde configuramos nuevos usuarios. Nuestros usuarios siguen ahorrando con su propio nombre de usuario / contraseña.

Aquí hay una versión abreviada del formulario que estamos usando. He intentado cambiar el nombre de los campos a "xxu" y "xxp" pero el autocompletado parece leer el título de la etiqueta. He engañado con varias etiquetas diferentes pero aún así, de alguna manera, activa el llenado automático.

<form novalidate autocomplete="off">
<div class="control-group">
<label class="control-label">Username</label>
<div class="controls">
<input type="text" name="xxu" autocomplete="off" required="required">
</div>
</div>
<div class="control-group">
<label class="control-label">Username</label>
<div class="controls">
<input type="password" name="xxp" autocomplete="off" required="required">
</div>
</div>
</form>

Encontré este artículo en el sitio de Apple que describe este problema. https://discussions.apple.com/message/25080203#25080203

¿Alguien sabe de algún otro método para deshabilitar el llenado automático de un formulario en Safari 7? (Agh, este es el tipo de cosa que esperaríamos de IE)

Gracias por la ayuda.

Answer 1

Adopté una solución más simple que se adapta a nosotros donde hay administradores que mantienen cuentas de usuario y ocasionalmente configuran su contraseña, y eso es simplemente cambiar el tipo de entrada de contraseña del usuario para que sea:

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

Sencillo pero efectivo.

Answer 2

Encontré una forma más rápida y sencilla de evitar el autocompletado de formularios. Funciona en FF 27, Chrome 36 y Safari 7.0.5 en una Mac. Todavía no lo he probado en otro sistema operativo.

Simplemente puse un campo falso como el primer lugar en mi formulario, sin necesidad de atributos de etiqueta o id y nombre. Lo escondí por ejemplo con un estilo inline y voilà !

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

Los campos de correo electrónico y contraseña en mi formulario se llenan con los valores de la base de datos como se esperaba y ya no se completan automáticamente.

Para ser honesto, tampoco me gusta esta solución ... Me encantaría encontrar una solución compatible y estándar, pero parece que autocompletar = "apagado" ya no funciona.

Answer 3

Fui con una variación simplificada del enfoque douchebag_safari que surgió con @Skurpi. Es solo HTML y va al final de mi formulario.

<!-- http://.com/questions/22817801/how-to-disable-auto-fill-in-safari-7 -->
<div class="douchebag_safari" style="left: -9999px; position: fixed; width: 1px;">
<input type="password">
</div>

Answer 4

Hemos tenido el mismo problema recientemente. Además de eso, tuvimos una validación AJAX de nuestro formulario sucediendo en Bllur. Por alguna extraña razón, esto provocaría que el safari autocompletara nuestro campo de entrada de correo electrónico nuevamente. Así que cada vez que complete el correo electrónico que desee, Safari completará un correo electrónico que prefiera en su lugar. Haciendo imposible pasar por nuestro formulario.

Nuestra solución

Era casi romper el algoritmo de autocompletar de Safaris (y Chromes).

HTML:

<div class="douchebag_safari">
<input class="js-clear_field" tabindex="-1" name="e-mail" type="email">
<input class="js-clear_field" tabindex="-1" name="Ecom_User_Password" type="password">
</div>

CSS:

.douchebag_safari {
position: fixed;
width: 1px;
left: -50px;
}
.douchebag_safari input {
width: 1%;
}

JS:

$(''#form'').on(''submit'', function () {
"use strict";
$(''.js-clear_field'').attr(''disabled'', ''disabled'');
}

La parte principal de esto es: colocamos campos de entrada de tipo correo electrónico y contraseña con nombres que ocupan un lugar más alto (¿o el mismo?) En el algoritmo de autocompletar de Safaris y los ocultamos fuera de la pantalla. OnSubmit, los campos se deshabilitarán y, por lo tanto, se excluirán del POST a nuestro backend.

El inconveniente es que los usuarios no se autocompletarán en nuestro formulario, pero decidimos que valía la pena en nuestro caso.

NOTA (suponiendo que le importe): los usuarios con Javascript desactivado seguirán incluyendo estos campos en sus POST. Dependiendo de su configuración, deberá permitir que estos dos campos lleguen a su servidor para evitar errores. ¡Solo asegúrese de no hacer nada con estos campos por razones de seguridad!

Como beneficio adicional, esto resolvió un error donde Chrome (35) asumió que el campo de entrada sobre el campo de contraseña es el nombre de usuario. En nuestro caso, era un campo numérico, que daba a los usuarios experiencias y errores extraños.

Answer 5

Las soluciones dadas arriba no funcionaron para mí. Después de la investigación, pude evaluar que la decisión de Safari de habilitar el autocompletado se basa en los siguientes factores:

• ¿El atributo "id" de la entrada contiene "nombre"?
• ¿El atributo "nombre" de la entrada contiene "nombre"?
• ¿La etiqueta de la entrada contiene "nombre"?

Luego podría desactivar el autocompletar de Safari con el siguiente código, que terminé envolviéndolo en un complemento jQuery, para mayor comodidad:

$(document).ready(function () {
$(''input'').disableAutoFill();
});

(function($) {
$.fn.disableAutoFill = function() {
"use strict";
var self = {
/**
* Disable autofill for one input
* @param {Object} $input jQuery element
*/
disableAutoFill: function($input) {
if (self.isBrowser(''safari'')) {
self.alterLabel($input);
self.alterName($input);
self.alterId($input);
}
$input.attr(''autocomplete'', ''off'');
},
/**
* Change input''s name
* Make sure Safari wont detect the word "name" in the name attribute
* otherwise Safari will enable autofill
* @param {Object} $input jQuery element
*/
alterName: function ($input) {
$input.attr(''data-original-name'', $input.attr(''name''));
// Find unique name attribute value
var new_name = false;
var iteration = 0;
while (iteration < 10 && !new_name) {
new_name = self.random();
if (self.checkAttributeExists(''name'', new_name)) {
new_name = false;
}
}
if (new_name) {
$input.attr(''name'', new_name);
self.setFormSubmitHandler($input);
}
},
/**
* Change input''s id
* Make sure Safari wont detect the word "name" in the id attribute
* otherwise Safari will enable autofill
* @param {Object} $input jQuery element
*/
alterId: function ($input) {
$input.attr(''data-original-id'', $input.attr(''id''));
// Find unique id attribute value
var new_id = false;
var iteration = 0;
while (iteration < 10 && !new_id) {
new_id = self.random();
if (self.checkAttributeExists(''id'', new_id)) {
new_id = false;
}
}
if (new_id) {
$input.attr(''id'', new_id);
self.setFormSubmitHandler($input);
}
},
/**
* Reset input''s name and id to its initial values before submitting the form
* @param {Object} $input jQuery element
*/
setFormSubmitHandler: function ($input) {
var $form = $input.closest(''form'');
if ($form.length > 0) {
$form.submit(function() {
var id = $input.attr(''data-original-id'');
if (id) {
$input.attr(''id'', id);
}
var name = $input.attr(''data-original-name'');
if (name) {
$input.attr(''name'', name);
}
});
}
},
/**
* Make sure Safari wont detect the word "name" in the label
* otherwise Safari will enable autofill
* @param {Object} $input jQuery element
*/
alterLabel: function ($input) {
var $label = self.findLabel($input);
if ($label && $label.length > 0) {
var text = $label.text();
var array = text.split('''');
text = array.join(''<span></span>'');
$label.html(text);
}
},
/**
* Find label element of an input
* see http://.com/questions/4844594/jquery-select-the-associated-label-element-of-a-input-field
* @param $input
* @returns {*}
*/
findLabel: function ($input) {
var $label = $(''label[for="''+$input.attr(''id'')+''"]'');
if ($label.length > 0) {
return $label;
}
var $parentElem = $input.parent();
var $parentTagName = parentElem.get(0).tagName.toLowerCase();
if ($parentTagName == "label") {
return $parentElem;
}
return null;
},
/**
* Generate a random string
* @returns {string}
*/
random: function () {
var text = '''';
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i=0; i < 5; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
},
/**
* Check if there is an existing DOM element with a given attribute matching a given value
* @param {string} attributeName
* @param {string} attributeValue
* @returns {boolean}
*/
checkAttributeExists: function (attributeName, attributeValue) {
return $(''[''+attributeName+''=''+attributeValue+'']'').length > 0;
},
/**
* Detect current Web browser
* @param {string} browser
* @returns {boolean}
*/
isBrowser: function (browser) {
// http://.com/questions/5899783/detect-safari-using-jquery
var is_chrome = navigator.userAgent.indexOf(''Chrome'') > -1;
var is_explorer = navigator.userAgent.indexOf(''MSIE'') > -1;
var is_firefox = navigator.userAgent.indexOf(''Firefox'') > -1;
var is_safari = navigator.userAgent.indexOf("Safari") > -1;
var is_opera = navigator.userAgent.toLowerCase().indexOf("op") > -1;
if ((is_chrome)&&(is_safari)) {is_safari=false;}
if ((is_chrome)&&(is_opera)) {is_chrome=false;}
if (browser === ''chrome'') {
return is_chrome;
}
if (browser === ''explorer'') {
return is_explorer;
}
if (browser === ''firefox'') {
return is_firefox;
}
if (browser === ''safari'') {
return is_safari;
}
if (browser === ''opera'') {
return is_opera;
}
return false;
}
};
self.disableAutoFill(this);
return this;
};
}(jQuery));

También puedes descargar o revisar el archivo here

Answer 6

Lo intenté todo, lo hice funcionar, y luego una versión posterior de Safari rompió mi sitio web nuevamente. Estoy a punto de probar los campos de formulario adicionales (gracias Skurpi). Mientras tanto, aquí está mi nueva solución (en PHP)

if(strpos($_SERVER[''HTTP_USER_AGENT''],''Safari'') !== false)
{
?>
<div style="background:#ffff66;border:1px solid #ff9900;font-size:1.5em;padding:1em;">
The Safari browser has a known bug: autocomplete replaces required data in our form with incorrect values. Unfortunately this may prevent you from adding products to the shopping cart. <br /><br />Please try a different browser or go to your browser settings and turn off autocomplete and refresh the page.
</div>
<?php
}

Si suficientes sitios web hacen esto, tal vez el equipo de Safari obtenga una sugerencia y arregle su navegador para obedecer el atributo autocomplete = "off".

Answer 7

Puedes probar esto:

Si puedes usar JavaScript y jQuery, puedes colocar esto en la carga del html (body onload):

$(''#theform input'').val('''');

Esta pregunta es similar a esta: ¿autocompletar = "off" es compatible con todos los navegadores modernos?

Hay navegadores que ya no admiten autocomplete="off"

Answer 8

Puedes usar este código javascript:

if (document.getElementsByTagName) {
var inputElements = document.getElementsByTagName(“input”);
for (i=0; inputElements[i]; i++) {
if (inputElements[i].className && (inputElements[i].className.indexOf(“disableAutoComplete”) != -1)) {
inputElements[i].setAttribute(“autocomplete”,”off”);
}
}
}

Answer 9

Tuvo el mismo problema y probé las dos primeras soluciones de HTML / CSS mencionadas.

No funcionaron para mí (o Safari 9.0.3 :)) así que implementé una solución como esta

<div style="overflow: hidden;width: 0px;height: 0px;">
<input id="password" type="password" name="password" />
</div>

en la parte superior de los campos de entrada de formulario real.

Probado en Safari, Firefox (44.0.2) y Chrome (48.0.2564.109) ejecutándose en OS X El Capitan.

Answer 10

Utilicé un número aleatorio y lo incorporé a cada nombre de campo para que el navegador nunca reconociera el nombre del campo.