Make Input Type=“Password” Use Number Pad on Mobile Devices

Question

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

Answer 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">

Answer 2

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:

Answer 3

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

Answer 4

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">

Answer 5

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.

Answer 6

type = "tel"
.class {
    -webkit-text-security: disc;
    -moz-webkit-text-security: disc;
    -moz-text-security: disc;
}