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: