Question

我正在尝试创建一个输入字段以输入大头针。在移动设备中，我希望不要以纯文本形式（例如密码输入字段）显示大头针。我在stackoverflow中找到了这个建议，但到目前为止没有一个有效

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

有没有办法做到这一点？

Answer 1

您可以为此使用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方式来实现希望对您有帮助：）

Answer 2

尝试将type="password"更改为type="number"。我相信密码输入类型会阻止移动设备上的数字键盘。这仍然仅适用于Webkit浏览器，但目前大部分移动浏览器中都使用了webkit。

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

除此之外，没有确保在不使用JavaScript的情况下在移动设备上输入密码和数字输入的方法。

Answer 3

我建议您使用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');" />

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

4 个答案: