web-dev-qa-db-fra.com

Make Input Type = "Password" Utiliser le pavé numérique sur les appareils mobiles

Sur mon site conçu pour les appareils mobiles, j'ai un champ de saisie qui est utilisé pour PIN chiffres. Je veux que le texte soit caché lors de sa saisie et je veux que le pavé numérique apparaisse lorsque le l'utilisateur sur l'appareil mobile souhaite saisir le code PIN. Le pavé numérique s'affiche lorsque Type = "Numéro" mais pas lorsque Type = "Mot de passe" et je ne peux pas (ou ne sais pas comment) définir Type = "Numéro et Mot de passe".

Des idées?

Merci d'avance!

htmlmobileinputpasswordsnumbers
36
JT Nolan

Certains navigateurs (iOS) reconnaissent la valeur d'attribut spécifique pattern de [0-9]* comme déclencheur du pavé numérique.

Le brouillon HTML 5.1 contient l'attribut inputmode , qui a été conçu pour résoudre le problème spécifique de la saisie mode (comme le clavier), mais il n'a pas encore été implémenté.

Vous pouvez cependant l'utiliser pour l'avenir - même si le HTML 5.1 actuel ne le permet pas pour type=password, pour une raison étrange.

<input type="password" pattern="[0-9]*" inputmode="numeric">
31
Jukka K. Korpela

Enfin, j'ai trouvé une réponse ici :

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

(ne fonctionne que dans les navigateurs WebKit)

35
Mati Tucci

Les moyens simples comme l'utilisation de "pattern" et "inputmode" ne fonctionnent pas dans Android ni IOS, j'ai donc mis en œuvre la solution de contournement ci-dessous en utilisant CSS et JavaScript.

https://jsfiddle.net/tarikelmallah/1ou62xub/

HTML

 <div>
  <input type="password" class="form-control ng-valid-minlength ng-valid-pattern ng-dirty ng-valid ng-valid-required" id="pass" name="pass" data-ng-minlength="4" maxlength="4"  tabindex="-1">
  <input type="tel" class="form-control ng-valid-minlength ng-dirty ng-valid ng-valid-required" id="passReal" name="passReal" required="" data-ng-minlength="4" maxlength="4" data-display-error-onblur="" data-number-mask="telephone"
         tabindex="5">
</div>

Javascript

$().ready(function(){
var xTriggered = 0;
$( "#passReal" ).keyup(function( event ) {
  $('#pass').val($('#passReal').val());
  console.log( event );
});
$( "#pass" ).focus(function() {
  $('#passReal').focus();
});

  });

Style:

input#passReal{
  width:1px;
  height:10px;
}
input#pass {
    position: absolute;
left:0px;
}

cette image de Android:

enter image description here

4
Tarek El-Mallah

Utiliser type = "tel" et masque css "disque" fonctionne pour moi , mais les gestionnaires de mots de passe (comme LastPass) doivent avoir une entrée avec type = " mot de passe "pour commencer à travailler.

Donc, mon idée est de changer le type d'entrée dépend du périphérique. J'ai utilisé Détection de navigateur par hisorange (pour Laravel) : type "mot de passe" pour Desktop et type "tel" pour les appareils mobiles.

CSS:

.password-mask {
        -webkit-text-security: disc;
        -moz-webkit-text-security: disc;
        -moz-text-security: disc;
    }

Manette:

 if (Browser ::isMobile() || Browser ::isTablet()) {
    $device = 'm';
 } else {
    $device = 'd';
 }

Lame:

<input type="{{$device=='d' ? 'password' :'tel'}}" 
pattern="[0-9]*" 
class="form-control password-mask {{$errors->has('password') ? 'invalid' :''}}"
autocomplete="current-password" id="password" name="password">
1
Lipa

Pourquoi ne définissez-vous pas l'entrée avec type="number" et utilisez jQuery pour changer le type après une pression sur l'entrée.

$("input").keydown(function () {
    $(this).prop('type', 'password');
});

Ensuite, si vous avez fait une erreur. Vous pouvez effacer l'entrée et définir à nouveau le type="number".

$("input").click(function () {
    $(this).val('');
    $(this).prop('type', 'number');
});

Ceci est ma première réponse et j'espère avoir aidé.

1
damalga

ou vous pouvez créer votre propre clavier avec javascript et CSS, et lorsque l'utilisateur tape un nombre, bisplay * et stocke la valeur dans une variable javascript. Tout comme je l'ai fait et cela rend la connexion utilisateur très fluide et facile ... Mobile d'abord

0
Jayo2k