Wprowadź typ wejściowy = "Hasło" Użyj klawiatury numerycznej na urządzeniach mobilnych

Question

Na mojej stronie przeznaczonej dla urządzeń mobilnych mam pole wejściowe, które jest używane do numerów PIN. Chcę, aby tekst był ukryty, gdy jest wprowadzany i chcę, aby klawiatura numeryczna pojawiła się, gdy użytkownik urządzenia mobilnego chce wprowadzić kod PIN. Klawiatura numerowa pojawia się, gdy Type = "Number", ale nie, gdy Type = "Password", a ja nie mogę (lub nie wiem jak) ustawić Type = "Number and Password".

Jakieś pomysły?

Z góry dziękuję!

Answer 1

Niektóre przeglądarki (iOS) rozpoznają specyficzną wartość atrybutu pattern z [0-9]* jako wyzwalającą klawiaturę numeryczną.

HTML 5.1 projekt zawiera atrybut inputmode, który został zaprojektowany w celu rozwiązania konkretnego problemu trybu wejściowego (np klawiaturze) selekcji, ale nie zostało jeszcze zrealizowane.

Można go jednak użyć na przyszłość, mimo że obecny HTML 5.1 nie dopuszcza go dla type=password, z jakiegoś dziwnego powodu.

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

Answer 2

Wreszcie znalazłem odpowiedź here:

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

(działa tylko w przeglądarkach WebKit)

Answer 3

lub można utworzyć własną klawiaturę z JavaScript i CSS, a gdy użytkownik wpisz liczbę, bisplay * i zapisz wartość w zmiennej javascript. Po prostu zrobiłem to i sprawia, że ​​logowanie użytkownika jest bardzo łatwe i proste ... Najpierw komórka

Answer 4

Proste sposoby, takie jak używanie "wzorca" i "trybu wejściowego" nie działają w systemie Android ani w systemie IOS, więc dodałem poniższe obejście za pomocą CSS i 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(); 
}); 

    }); 

Styl:

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

to zdjęcie z Android emulatora: