[英]How to have an input field be numbers and password type at the same time?
我正在尝试创建一个输入字段以输入大头针。 在移动设备中,我希望不要以纯文本形式(例如密码输入字段)显示大头针。 我在stackoverflow中找到了这个建议,但到目前为止没有一个有效
<input type="password" name="PIN" pattern="[0-9]*" inputmode="numeric" style="-webkit-text-security: disc;" required>
有没有办法做到这一点?
您可以使用CSS
#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]*" >
您可以使用最简单的大量方法来做到这一点,即使用CSS Hope可以帮助您:)
尝试将type="password"
更改为type="number"
。 我相信密码输入类型会阻止移动设备上的数字键盘。 这仍然仅适用于Webkit浏览器,但目前大部分移动浏览器都使用了webkit。
<input type="number" pattern="[0-9]*" inputmode="numeric" style="-webkit-text-security:disc;">
除此之外,如果不使用JavaScript,就无法确保在移动设备上同时输入密码和数字输入。
我建议您使用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');" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.