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?
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 :)
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.
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">
此选项将仅显示数字键盘和过滤器数字。
<input inputmode="numeric" type="password" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.