Domanda Come disabilitare il riempimento automatico in Safari 7


Sto cercando di trovare un modo per rendere Safari 7 (testato con la versione 7.0.2, 7.0.3) rispetto agli attributi autocomplete = "off". Non importa cosa cerco, continua a riempire automaticamente.

Questo è un problema per una delle nostre pagine di amministrazione in cui configuriamo nuovi utenti. I nostri utenti continuano a risparmiare con il proprio nome utente / password.

Ecco una versione abbreviata del modulo che stiamo utilizzando. Ho provato a rinominare i campi in "xxu" e "xxp" ma la compilazione automatica sembra leggere la didascalia dell'etichetta. Mi sono ingannato con varie etichette diverse ma in qualche modo si attiva il riempimento automatico.

<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>

Ho trovato questo articolo sul sito di Apple che descrive questo problema. https://discussions.apple.com/message/25080203#25080203

Qualcuno conosce qualche altro metodo per disabilitare il riempimento automatico per un modulo in Safari 7? (Agh, questo è il tipo di cosa che ci aspetteremmo da IE)

Grazie per l'aiuto.


19
2018-04-02 16:41


origine


risposte:


Abbiamo avuto lo stesso problema di recente. Inoltre, abbiamo avuto una convalida AJAX del nostro modulo in corso su Bürk. Per qualche strana ragione, ciò indurrebbe il safari a riempire di nuovo il nostro campo di input email. Quindi, ogni volta che inserisci l'email che desideri, Safari dovrebbe inserire un'email che preferiva. Rendere impossibile seguire la nostra forma.

La nostra soluzione

stava per interrompere l'algoritmo di riempimento automatico di Safaris (e 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');
}

Il suo significato è: Inseriamo campi di input di tipo email e password con nomi che si posizionano più in alto (o lo stesso?) Nell'algoritmo di riempimento automatico di Safari e li nascondono all'esterno dello schermo. OnSubmit, i campi saranno disabilitati e saranno quindi esclusi dal POST al nostro back-end.

Lo svantaggio è che gli utenti non avranno il completamento automatico nel nostro modulo, ma abbiamo deciso che ne è valsa la pena nel nostro caso.

NOTA (supponendo che ti interessi): Gli utenti con Javascript disabilitato continueranno a includere questi campi nei loro POST. A seconda della configurazione, è necessario consentire a questi due campi di accedere al back-end per evitare errori. Assicurati di non fare nulla con questi campi per motivi di sicurezza!

Come bonus, questo ha risolto un bug in cui Chrome (35) presupponeva che il campo di immissione sopra il campo della password fosse il nome utente. Nel nostro caso, si trattava di un campo numerico, che forniva una strana esperienza utente e bug.


11
2018-06-13 14:20



Sono andato con una variazione semplificata dell'approccio douchebag_safari che @Skurpi ha inventato. È solo HTML e va in fondo alla mia forma.

<!-- http://stackoverflow.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>

5
2018-06-28 21:48



Ho trovato un modo semplice e veloce per evitare il completamento automatico del modulo. Funziona in FF 27, Chrome 36 e Safari 7.0.5 su Mac. Non l'ho ancora testato in altri sistemi operativi.

Ho semplicemente messo un campo falso come primo posto nel mio modulo, senza bisogno di etichette o id e attributi del nome. L'ho nascosto ad esempio con uno stile inline e Ecco!

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

I campi email e password nel mio modulo vengono riempiti con i valori del database come previsto e non vengono più completati automaticamente.

Ad essere onesti, non mi piace neanche questa soluzione ... Mi piacerebbe trovare una soluzione compatibile e standard ma sembra che il completamento automatico = "off" non funzioni più.


3
2017-08-13 17:29



Aveva lo stesso problema e provato le prime due soluzioni HTML / CSS menzionate.

Non hanno funzionato per me (o Safari 9.0.3 :)), quindi ho implementato una soluzione come questa

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

in cima ai campi di inserimento del modulo.

Testato su Safari, Firefox (44.0.2) e Chrome (48.0.2564.109) in esecuzione su OS X El Capitan.


2
2018-02-18 11:46



Ho usato un numero casuale e l'ho incorporato in ogni nome di campo in modo che il browser non riconoscesse mai il nome del campo.


1
2018-03-13 08:15



Le soluzioni di cui sopra non hanno funzionato per me. Dopo l'indagine, ho potuto valutare che la decisione di Safari di abilitare la compilazione automatica si basa sui seguenti fattori:

  • L'attributo "id" dell'ingresso contiene "nome"?
  • L'attributo "nome" dell'ingresso contiene "nome"?
  • L'etichetta dell'ingresso contiene "nome"?

Potrei quindi disabilitare il riempimento automatico di Safari con il seguente codice, che ho terminato con il wrapping in un plug-in jQuery, per comodità:

$(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://stackoverflow.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://stackoverflow.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));

Puoi anche scaricare o controllare il file Qui


1
2018-02-14 18:41



Ho adottato una soluzione più semplice che ci si adatta dove ci sono amministratori che gestiscono account utente e che occasionalmente impostano la loro password, e che è semplicemente per cambiare il tipo di input della password dell'utente come:

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

Semplice ma efficace.


0
2017-08-08 08:41



Puoi provare questo:

Se sei in grado di utilizzare JavaScript e jQuery, puoi posizionarlo al caricamento del codice html (body onload):

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

Questa domanda è simile alla seguente: Il completamento automatico = "disattivato" è compatibile con tutti i browser moderni?

Ci sono browser che non supportano più autocomplete="off"


-3
2018-05-01 12:44