Comment désactiver la saisie semi-automatique dans les entrées de texte du navigateur de manière sélective via le code?

Question

Est-il possible de désactiver de manière sélective la fonction de remplissage automatique dans les champs de texte en utilisant le code?

Je développe mon code personnalisé dans ASP.Net AJAX pour rechercher la suggestion dans la base de données et je voudrais éviter que les suggestions du navigateur d'apparaître lorsque l'utilisateur commence à taper dans la zone de texte.

Je suis à la recherche d'une solution qui fonctionne dans les navigateurs les plus modernes (IE 7 et 8, Firefox, Safari et Chrome). Il est est ok si la solution de contournement est en Javascript.

Answer 1

Regardez l'attribut autocomplete HTML (sur les étiquettes de forme ou entrée).

<form [...] autocomplete="off"> [...] </form>

W3C> attribut Autocomplete

Edit:

De nos jours - des commentaires - navigateurs Web ne respectent pas toujours la balise autocomplete comportement défini. Ce non-respect pourrait être entourée d'un peu de code JavaScript mais vous devriez penser que vous voulez faire avant l'utiliser.

D'abord, les champs seront remplis lors du chargement de la page et ne seront vidées une fois la charge de page. Les utilisateurs se demander pourquoi le terrain a été vidé.

En second lieu, cela réinitialisera d'autres mécanismes de navigateur Web, comme le remplissage automatique d'un champ quand vous allez revenir à la page précédente.

jQuery( function()
{
  $("input[autocomplete=off]").val( "" );
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" action="">
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" id="username" name="username" value="John" autocomplete="off">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" id="password" name="password" value="qwerty" autocomplete="off">
  </div>
  <input type="submit" value="Login">
</form>

Answer 2

vous pouvez le mettre dans vos entrées:

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

ou jquery

$(":input").attr("autocomplete","off"); 

Answer 3

Il y a 2 solutions pour ce problème. Je l'ai testé suivant le code sur V36 Google Chrome. Version récente de Google Chrome force Autofill quel que soit le Autocomplete=off.Some des hacks précédents ne fonctionnent plus (34+ versions)

Solution 1:

Mettre le code suivant sous sous étiquette <form ..>.

<form id="form1" runat="server" >
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

...

En savoir plus

Solution 2:

$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {

                var input = this;
                var name = $(input).attr('name');
                var id = $(input).attr('id');

                $(input).removeAttr('name');
                $(input).removeAttr('id');

                setTimeout(function () {
                    $(input).attr('name', name);
                    $(input).attr('id', id);
                }, 1);
            });

Il supprime « nom » et « id » attributs des éléments et les attribue de retour après 1ms.

Answer 4

Ajout d'un attribut autocomplete=off à l'élément input html devrait le faire.

Answer 5

Cela devrait fonctionner dans tous les navigateurs

    <script type="text/javascript">
        var c = document.getElementById("<%=TextBox1.ClientID %>");
        c.select =
        function (event, ui) 
        { this.value = ""; return false; }
    </script>

Answer 6

Ajoutez le AutoCompleteType="Disabled" à votre zone de texte

Answer 7

Ma solution est de rendre le champ de mot de passe une zone de texte normale, puis en utilisant jquery pour le transformer en champ de mot de passe sur le focus:

asp:TextBox runat="server" ID="txtUsername" />
<asp:TextBox runat="server" ID="txtPassword" />
<script>
    $("#txtPassword").focus(function () {
        $("#txtPassword").prop('type', 'password');
    });
</script>