How to have an input field be numbers and password type at the same time?

user_10818509 0
Viewed 909

I am trying to create an input field to enter pin. In mobile devices I want the pin to not be displayed in plain text like the password input field. I found this suggestion in stackoverflow for this but none of it has worked so far

<input type="password" name="PIN" pattern="[0-9]*" inputmode="numeric" style="-webkit-text-security: disc;" required>

Is there a way to achieve this?

css html javascript
4 Answers

You can use CSS for that 

#password{
  -webkit-text-security: disc;
    -moz-text-security:circle;
     text-security:circle;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}  
<input type="number" id="password" pattern="[0-9]*" >

You can do that with tons of ways the easiest is with CSS Hope that helps you :)

user_115894680

Try changing type="password" to type="number". I believe the password input type prevents the numeric keyboard on mobile devices. This will still only work on webkit browsers but webkit is used in a large percentage of mobile browsers at this point.

<input type="number" pattern="[0-9]*" inputmode="numeric" style="-webkit-text-security:disc;">

Besides this, there is no surefire way to ensure both a password and numeric input on mobile devices without using javascript.

user_110205150

I would suggest you use javascript

let mobileInput  = document.getElementById('mobile');

mobileInput.oninput = function(){
  // if empty
 if(!this.value) return;

 // if non numeric
 let isNum = this.value[this.value.length - 1].match(/[0-9]/g);
 if(!isNum) this.value = this.value.substring(0, this.value.length - 1);
}
<input id="mobile" type="password">

user_67487720

This option will bring up the numeric keyboard and filter numbers only. 

<input inputmode="numeric" type="password" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
Admin1
Related