web-dev-qa-db-fra.com

Empêcher le texte prédictif Samsung au format HTML

J'ai un formulaire HTML avec un champ de saisie de texte. Au fur et à mesure que l'utilisateur tape, nous faisons AJAX demander des suggestions de texte prédictives, basées sur une liste de valeurs de notre base de données.

Nous affichons cette liste et l'utilisateur peut sélectionner l'un d'entre eux; nous leur montrons ensuite le reste du formulaire.

Si vous consultez notre page Web sur un Samsung Galaxy S4, dans son navigateur intégré ou sur Chrome ou Firefox, les suggestions d'entrée prédictives de l'appareil apparaissent également sous forme de types d'utilisateurs. par exemple. voir la capture d'écran:

 enter image description here

Il est assez facile pour un utilisateur individuel de désactiver cela dans les paramètres de son propre téléphone. Cependant, nous voulons le faire pour qu'il soit toujours désactivé pour ce champ pour tous les utilisateurs. Nous faisons déjà tout ce qui suit, ce qui ne semble pas l'empêcher d'apparaître:

<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">

Vous pouvez également voir cela ici .

Aucune suggestion?

javascripthtmlhtml5samsung-mobilet9
26
duncan

J'ai essayé différentes choses et il semble que sur mobile, vous n'avez actuellement aucune chance de le faire correctement.

Selon Safari Developer Docs, il existe un support https://developer.Apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html mais il semble que cela soit davantage lié au Bureau. Safari que iOS.

De plus, la vérification orthographique pourrait le faire, mais actuellement, selon http://caniuse.com/#feat=spellcheck-attribute :

La prise en charge partielle dans les navigateurs mobiles résulte de leur système d’exploitation avoir la vérification orthographique intégrée au lieu d'utiliser le soulignement ondulé à indiquer des mots mal orthographiés. spellcheck = "false" ne semble pas avoir aucun effet dans ces navigateurs.

8
Fer To

Définir le champ comme mot de passe désactive la saisie semi-automatique, la correction automatique ... et tous les comportements mentionnés ci-dessus. Après avoir saisi l'entrée, je la change en texte. L'événement oninput était crucial pour moi.

 <input id="myinput" oninput="changeInputType(this)" type="password"/>
 <script>
     function changeInputType(input) {
       input.type = 'text';
    }
 </script>
6
snezed

Définir le type de saisie sur mot de passe vous donne le comportement souhaité, mais vous devez ensuite récupérer et afficher le texte. La page de test suivante se rapproche, mais a encore besoin d'amour. Cacher les points fait disparaître le curseur. Bonne chance. Le problème est clairement samsung négliger de mettre en œuvre les attributs, de sorte que vous pourriez être pardonné pour ignorer celui-ci, je sens.

    <!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            input[type="password"] {
                cursor : url(cursor.png),auto;
                color : rgba(0,0,0,0);
            }
        </style>

    </head>
    <body>
        <form>
            <input type="password" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="under" /><br />
            <div id="over" style="position:absolute; left:10px; top:10px"></div>
        </form>
        <script>
            function textChanged(event) {
                document.getElementById('over').innerHTML = document.getElementById('under').value;
            }       
            document.getElementById('under').addEventListener('keyup', textChanged);
        </script>
    </body>
    </html>
3
bbsimonbb

J'ai effectué des recherches et, dans les navigateurs Web actuels, redéfinir la propriété -webkit-text-security sur les champs input[type="password"] n'est pas autorisé.

Donc, sur la base de la réponse user1585345, j'ai amélioré mon approche. C'est très compliqué, mais cela serait suffisant dans certains cas.

Cela consiste à créer un mot de passe de saisie, où vous tapez, et un texte de saisie après lequel se modifie lorsque la première saisie est modifiée. Vous pouvez également voir que le curseur est affiché en raison des styles.

var textInput = document.querySelector('.unpredictable-input input[type="text"]');
var passwordInput = document.querySelector('.unpredictable-input input[type="password"]');

passwordInput.addEventListener('input', function() {

    textInput.value = passwordInput.value;

    if(navigator.userAgent.match(/Android/)) {
        passwordInput.style.letterSpacing =
        (2.6 + passwordInput.value.length * 0.05) + 'px';
    }

}, false);
.unpredictable-input {
    position: relative;
    width: 150px;
}

.unpredictable-input input {
    position: absolute;
    width: 100%;
}

.unpredictable-input input[type="text"] {
    font-family: monospace;
}

.unpredictable-input input[type="password"] {
    color: black;
    user-select: none;
    -webkit-text-fill-color: transparent;
    background: transparent;
    letter-spacing: 2.5px;
    padding: 3px;
    border: 0;
}
<div class="unpredictable-input">
    <input type="text" />
    <input type="password" />
</div>

1
José Antonio Postigo

Je ne peux pas tester cela parce que je n'ai pas de téléphone samsung, mais avez-vous essayé le truc name = "password"? 

Désactivation de la saisie automatique pour les zones de texte et de saisie dans Android Cordova-app

1
Vincent Chan

Pour les entrées numériques, type = "tel" résout le problème

0
fedevegili

Les attributs HTML5 ne seront pas respectés par le service de texte prédictif de Samsung.

J'ai signalé au forum Samsung Developers et demander un correctif officiel: http://developer.samsung.com/forum/thread/predictive-text-service-not-honoring-auto-correct-attribute/201/315078?boardName = SDK & startId = zzzzz ~

Si ce problème vous concerne, veuillez vous joindre à l’effort de demander un correctif officiel.

0
Believe2014