Make Input Type = "Password" Usa il tastierino numerico sui dispositivi mobili

Question

Sul mio sito progettato per dispositivi mobili ho un campo di input che viene utilizzato per i numeri PIN. Voglio che il testo sia nascosto appena inserito e voglio che il tastierino numerico venga visualizzato quando l'utente sul dispositivo mobile vuole inserire il PIN. Il tastierino numerico si apre quando Type = "Number" ma non quando Type = "Password" e non posso (O non so come) impostare Type = "Number and Password".

Qualsiasi idea?

Grazie in anticipo!

Answer 1

Alcuni browser (iOS) riconoscono lo specifico valore dell'attributo pattern di [0-9]* come attivazione del tastierino numerico.

Il HTML 5.1 progetto contiene l'attributo inputmode, che è stato progettato per affrontare il problema specifico della modalità di ingresso (come tastiera) di selezione, ma non è stata ancora implementata.

Si potrebbe usare per il futuro, sebbene - anche se l'attuale HTML 5.1 non lo consente per type=password, per qualche strano motivo.

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

Answer 2

Infine, ho trovato una risposta here:

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

(funziona solo nei browser basati su WebKit)

Answer 3

o si può creare il proprio tastiera con JavaScript e CSS, e quando l'utente digita un numero, bisplay * e memorizza il valore in una variabile javascript. Proprio come ho fatto io e rende l'accesso utente molto semplice e facile ... Mobile prima

Answer 4

I modi semplici come utilizzare "pattern" e "inputmode" non funzionano in Android o IOS, quindi ho implementato la soluzione alternativa in basso usando i CSS e 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(); 
}); 

    }); 

Stile:

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

questa immagine da emulatore Android: