我想創建一個表格，用戶可以輸入電子郵件和4位密碼。對于PIN輸入，我想使用& ltinput type = " number " & gt而不是正則表達式，但我不知道如何隱藏輸入的數字。

使用type password和HTML maxlength屬性:

<input type="password" name="pin" maxlength="4">

http://jsfiddle.net/skxr9o47/

這需要一些JavaScript驗證來確保輸入了一個數字。

另一種方法是使用HTML 5，利用number類型(正如您已經做的那樣)或pattern屬性，并在表單中驗證它。

<form>
    <input type="text" name="pin" pattern="[0-9]{4}" maxlength="4">
    <input type="submit" value="Validate">
</form>

http://jsfiddle.net/L6n9b5nr/

但是，您必須使用JavaScript或jQuery來屏蔽用戶的輸入。

對于Android和iOS，您還可以將inputmode="numeric "添加到input type="password "中。用戶將得到一個只有數字的鍵盤(與用于輸入type="tel "的鍵盤相同)。 示例:

<input name="pincode" type="password" inputmode="numeric" maxlength="4">

使用樣式和文本輸入 另一個并非在所有瀏覽器中都有效的選項是通過輸入type="text "中的樣式隱藏數字。示例:

<style>
    .pincode {
        text-security: disc;
        -webkit-text-security: disc;
        -moz-text-security: disc;
    }
</style>
<input name="pincode" type="text" class="pincode" inputmode="numeric" maxlength="4">

我覺得實際上沒有人完全回答這個問題，我已經結合了關于這個問題的多個帖子的代碼，這是我使用的。最大4位數，隱藏輸入，只有數字和數字鍵盤在android和ios上顯示。

<input
  type="number"
  id="password"
  name="password"
  pattern="[0-9]{4}"
  maxlength="4"
  style="-webkit-text-security: disc;"
  oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
/>

如果您將輸入字段與密碼類型一起使用，數字應該顯示為項目符號，而不是實際的數字。

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

嘗試以下方法。

注意:

使用等寬字體系列，因為他們有統一的字符寬度和樣式，我在這里依賴于ch。 validateInputfunction將確保只輸入數字。 輸入文本類型和maxlength = & quot4 & quot確保數字大小不超過4。 最后，如果您想提供更多位數的PIN碼，例如6位數，請修改。引腳輸入寬度=引腳數* 1.5通道 正如@Ferris指出的，Firefox仍然不支持text-security:disc；這里列出了一個替代解決方案

document.querySelector('.pin-input').addEventListener('input', validateInput);

function validateInput(e) {
  const el = e.target;

  if (el.validity.patternMismatch) {
    el.value = el.value.slice(0, -1);
    return false;
  }
  return true;
}

.pin-input {
  font-family: monospace;
  font-size: 2.5rem;
  border: none;
  outline: none;
  padding: 0;
  width: calc(1.6ch * 4);
  background: repeating-linear-gradient(90deg, dimgrey 0, dimgrey 1ch, transparent 0, transparent 1.6ch) 0 100%/100% 2px no-repeat;
  color: dimgrey;
  letter-spacing: .6ch;
  -webkit-text-security: disc;
  -moz-text-security: disc;
}

.pin-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  padding: 0;
  margin: 0;
}

<div class="pin-container">
  <input type="text" name="pin-code" class="pin-input" pattern="\d*" maxlength="4" title="Input 4 number PIN code" inputMode="numeric" autocomplete="off"/>
</div>

為引腳增加一些功能:

pin = document.getelementByID("pin");

if(pin == 1234){
    window.open("page.html");
    //Any code after pin is correct
}