58

On my site designed for mobile devices I have an input field that is used for PIN numbers. I want the text to be hidden as it is entered and I want the number pad to pop up when the user on the mobile device wants to enter the PIN. The number pad pops up when Type="Number" but not when Type="Password" and I can't (Or don't know how to) set Type="Number and Password".

Any Ideas?

starball
  • 20,030
  • 7
  • 43
  • 238
JT Nolan
  • 1,200
  • 1
  • 9
  • 17
  • 1
    You might have to fake the password field and insert asterisks into the field yourself. – Brad Oct 01 '13 at 23:04

7 Answers7

62

Some browsers (iOS) recognize the specific pattern attribute value of [0-9]* as triggering numeric keypad.

The HTML 5.1 draft contains the inputmode attribute, which has been designed to address the specific issue of input mode (like key pad) selection, but it has not been implemented yet.

You could use it for the future, though – even though the current HTML 5.1 does not allow it for type=password, for some odd reason.

<input type="password" pattern="[0-9]*" inputmode="numeric">
Aditya
  • 4,453
  • 3
  • 28
  • 39
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 9
    I've tried this on iOS 8.2, and I get the regular alphabetical keyboard. Works exactly as expected when `type="text"`; it's only when I change it to `type="password"` that I get the alphabetical keyboard. – Daisy Leigh Brenecki Apr 21 '15 at 07:22
  • 1
    Using Cordova, building target=android this does not work. Still shows numeric keyboard – Kentonbmax Nov 24 '16 at 02:06
  • 2
    If you want to test the different approaches presented in these answers, on your device, take a look at http://cdpn.io/e/ygoNbJ – raphinesse Jan 24 '17 at 19:08
44

Finally, I found an answer here:

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

(only works in WebKit based browsers)

Community
  • 1
  • 1
Mati Tucci
  • 2,826
  • 5
  • 28
  • 40
  • 1
    This worked for me (Safari, iOS 9.3.2). Unfortunately, the numbers entered appear in the left-most box of the auto-suggest area at the top of the on-screen keyboard, so they're still visible on-screen (despite being masked within the actual input field itself). – GoBusto Jul 18 '16 at 15:16
  • 2
    Following on from my previous comment: It seems that changing the input field type from `number` to `tel` prevents the auto-suggest area from displaying anything. Combined with `-webkit-text-security: disc;`, this ensures that the password is not shown on-screen at all. – GoBusto Aug 06 '16 at 12:33
  • 4
    `` – xinthose Feb 08 '17 at 15:58
  • 2
    Note that, this approach may not be secure since the input value could be seen in inspector. Also, voice over will read the numbers out loud. – snowrain Nov 20 '18 at 22:24
4

The straightforward ways like using "pattern" and "inputmode" not working in Android nor IOS, so I emplemented the below workaround using CSS, and 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;
}

this image from Android emulator:

enter image description here

Tarek El-Mallah
  • 4,015
  • 1
  • 31
  • 46
2

Why don't you set the input with type="number" and use jQuery to change the type after a keydown in the input.

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

Then if you have made a mistake. You could clear the input and set once again the type="number".

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

This is my first answer and I hope I've helped.

Kaushik Makwana
  • 1,329
  • 2
  • 14
  • 24
damalga
  • 21
  • 2
1

Use type="tel" and css mask "disc" is working for me, but Password Managers (like LastPass) need to have input with type="password" to start working.

So, my idea is to change input type depends on device. I used Browser Detection by hisorange (for Laravel): "password" type for Desktop, and "tel" type for Mobile divices.

CSS:

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

Controller:

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

Blade:

<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">
Lipa
  • 51
  • 4
0
type = "tel"
.class {
    -webkit-text-security: disc;
    -moz-webkit-text-security: disc;
    -moz-text-security: disc;
}
Hamidreza Sadegh
  • 2,155
  • 31
  • 33
  • 2
    Code-only answers are generally frowned upon on this site. Could you please edit your answer to include some comments or explanation of your code? Explanations should answer questions like: What does it do? How does it do it? Where does it go? How does it solve OP's problem? See: [How to anwser](https://stackoverflow.com/help/how-to-answer). Thanks! – Eduardo Baitello Nov 28 '19 at 12:52
-1

or you could create your own keyboard with javascript and CSS, and when the user type a number, bisplay * and store the value in a javascript variable. Just lik I did and it makes user login very smooth and easy... Mobile first

Jayo2k
  • 251
  • 3
  • 14