web-dev-qa-db-fra.com

Comment faire pour que type d'entrée "tel" fonctionne comme type = "mot de passe"

Lorsque vous utilisez la balise input en tant que type="tel", le clavier des périphériques tactiles correspond au type de zone de saisie. Cependant, je souhaite garder la valeur dans la balise input cachée (comme avec le type password). Le comportement normal consisterait à masquer chaque caractère pendant la frappe.

<input type="tel">

input [type="tel"] {
    -webkit-text-security: disc;
}

Cette solution fonctionne dans la plupart des navigateurs, mais pas dans IE.

<input type="password" pattern="[0-9]*" inputmode="numeric">

Cette solution ne fonctionne pas comme prévu.

Y a-t-il un moyen d'accomplir ce que j'essaie de faire?

javascripthtml5css3
15
CodeMan

Je sais qu’il existe déjà une solution agréable, efficace et acceptée de la part de jdgregson, mais j’ai vraiment aimé l’idée de rybo111 d’une solution basée sur les polices personnalisées et je voulais l’essayer.

L'idée est de créer une police ne contenant que des cercles afin que, lorsque la famille de polices est appliquée à l'élément en entrée, aucun caractère ne soit apparemment affiché.

Donc, au cas où quiconque serait toujours intéressé par une solution non-JS avec un support de navigateur décent et sans les problèmes connus liés à la réponse de jdgregson, j'ai créé une police simple pour cela.

GitHub repo : https://github.com/noppa/text-security

Démo de JSFiddle : https://jsfiddle.net/449Lamue/6/

La police peut être utilisée en incluant le dist/text-security.css à partir du référentiel cloné ou de RawGit ou quelque chose de similaire. Après avoir inclus le css, vous pouvez utiliser la police en définissant le font-family de l'élément sur 'text-security-disc'.

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/noppa/text-security/master/dist/text-security.css">
<style>
     input [type="tel"] {
         font-family: "text-security-disc";
         -webkit-text-security: disc;
     }
</style>

Dans l’esprit de "remplir" la sécurité -webkit-text-security, j’ai également ajouté les options "circle" et "square" à utiliser comme symbole de masquage.

J'ai testé cela avec Chrome v49, IE11, Microsoft Edge 25 et Chrome v50 sur Android 5.0, dans lesquels l'entrée de type "tel" ouvre le clavier numérique.

12
noppa

Vous pouvez y parvenir de plusieurs manières:

1) -webkit-text-security

La solution la plus élégante consiste à utiliser le style CSS intégré -webkit-text-security: circle; qui est destiné à cette chose. Malheureusement, ce n'est pas portable, et n'est pas supporté sur IE ou Edge. Vous pouvez trouver une solution de contournement pour obtenir de l’assistance sur d’autres navigateurs ici si vous choisissez d’utiliser cette approche.

2) Changer le type en mot de passe après sa sélection

Comme Fidel90 et d'autres l'ont fait remarquer, vous pouvez essayer de passer du type="tel" au type="password" après que l'utilisateur l'a sélectionné. J'ai fait un violon de cette idée ici . Cela fonctionne parfaitement sous iOS, mais sous Android, il ne parvient pas à lancer le premier tap puis se lance comme clavier par défaut lors du second tap.

3) Utiliser une police qui n'a qu'un caractère

Une autre idée suggérée par rybo111 dans les commentaires qui a été implémentée par noppa ci-dessous consiste à utiliser une police ne disposant que d'un caractère de mot de passe. C'est probablement la solution la plus portable et la moins piratée. Un inconvénient est que l’utilisateur ne peut pas voir le caractère qu’il vient de taper comme le fait le comportement habituel des champs de mot de passe mobile modernes. Un violon complet de ceci est affiché ici .

4) Copiez le texte dans une entrée masquée à mesure que l'utilisateur tape

Mon idée (ci-dessous) est d’utiliser une seconde entrée pour stocker le nombre réel, puis le masquer au fur et à mesure que l’utilisateur le tape. Notez que cela filtrera tous les caractères du numéro final qui ne sont pas des numéros de téléphone, bien que vous puissiez modifier la variable pour accepter ce que vous voulez.

Testé et fonctionne sur:

  • iOS 9 Safari
  • Android 6.0 Chrome
  • Internet Explorer 11
  • FireFox 45
  • Chrome 50
  • Opéra 36
  • Microsoft Edge 25
var BACKSPACE_CHARS = [8, 46, 229];

function hideNumber(fakeInput, event) {
    var hideChar = '*';
    // add characters that you want to appear in the final number to this
    // string -- leave the string empty to allow all characters
    var phoneChars = '0123456789()-+';
    var keyCode = event.keyCode || event.charCode;
    var key = String.fromCharCode(keyCode)+'';
    var realInput = document.getElementById("hidden-number");
    var len = fakeInput.value.length;
    fakeInput.value = '';
    if(phoneChars.indexOf(key) > -1 || !phoneChars.length) {
        realInput.value += key;
    } else {
        if(BACKSPACE_CHARS.indexOf(keyCode) < 0) {
            --len;
        }
    }
    for(var i=0; i<len; i++) { // no String.repeat() in IE :(
        fakeInput.value += hideChar;
    }
    updateDisplay();
}

function backspace(event) {
    var keyCode = event.keyCode || event.charCode;
    var realInput = document.getElementById("hidden-number");
    if(BACKSPACE_CHARS.indexOf(keyCode) > -1) { // backspace or delete
        var len = realInput.value.length;
        realInput.value = realInput.value.slice(0, len-1);
    } 
    updateDisplay();
}

function updateDisplay() {
    var realInput = document.getElementById("hidden-number");
    var display = document.getElementById("display");
    display.innerHTML = realInput.value || '';
}
<input type="tel" name="number" id="number-hider" onkeypress="hideNumber(this, event)" onkeydown="backspace(event)" onblur="hideNumber(this)">
<input type="hidden" name="realnumber" id="hidden-number">
<div id="display"></div>

Bugs connus:

  • Si un utilisateur appuie ou clique au milieu de la zone de texte et dactylographie ou backspaces, les caractères sont ajoutés ou supprimés à la fin du nombre réel.
7
jdgregson

J'ai créé un violon qui remplace la tel initiale par une entrée password dès que vous la focalisez (jQuery nécessaire):

var value = "",
        isPWD = false;

$('#wrap')
  .on("focus", "#input", function() {
        if (!isPWD) {
      var pass = $('<input id="input" type="password">');
      $(this).replaceWith(pass);
      isPWD = true;
      pass.focus();
    }    
  })
  .on("change", "#input", function() {
        value = $(this).val();
    $("#span").text(" = " + value);
  })
  .on("blur", "#input", function() {
        var tel = $('<input id="input" type="tel">');
    $(this).replaceWith(tel);
    isPWD = false;
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
  <input id="input" type="tel"/>
  <span id="span"></span>
</div>

Je n'ai pas testé cela sur un appareil mobile jusqu'à présent, donc je ne suis pas sûr de pouvoir utiliser le pavé numérique pour l'utilisateur dans tous les cas.

EDIT: Au moins mon portable IE ne montrait pas de pavé numérique, mais uniquement le champ de texte standard.

1
Fidel90

En utilisant noppa's answer et sa police GitHub et jdgregson's answer , voici une solution CSS clé en main ( fiddle ):

@font-face {
  font-family: "password-mask";
  src: url(data:font/woff;charset:utf-8;base64,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) format("woff");
}
.numeric-password {
  font-family: password-mask;
}
.numeric-password::placeholder {
  font-family: initial;
}
<input type="tel" class="numeric-password" placeholder="test" />

Pour prendre en charge les appareils iOS et Android plus anciens, il vous suffirait d'ajouter une autre définition de police-face URI de données avec le fichier ttf pour la police de masque de mot de passe. Idem pour IE avec le fichier de police eot, mais la plupart des navigateurs modernes prennent en charge woff et devraient fonctionner avec ce CSS.

1
Alex W