如何在一個輸入字段中同時輸入數字和密碼類型？

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 Hope可以幫助您:)

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');" />