如何在一个输入字段中同时输入数字和密码类型？

Question

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?

Answer 1

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 :)

Answer 2

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.

Answer 3

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

Answer 4

此选项将仅显示数字键盘和过滤器数字。

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