ASP.NET License Key 分段輸入自動跳欄實作（JavaScript）

軟體授權金鑰常採「五組五碼」格式（如 `AAAAA-BBBBB-CCCCC-DDDDD-EEEEE`）。本文示範純前端 JavaScript 實現：使用者輸入滿 5 碼自動游標跳至下一個 TextBox，最後一組限制長度，送出時由伺服器端驗證。

完整前端程式碼

<script type="text/javascript">
    // 當前輸入框滿 5 碼自動焦點移至下一個
    function JumpToNextTextBox(currentTxtBox, nextTextBoxID) {
        if (currentTxtBox.value.length >= 5) {
            document.getElementById(nextTextBoxID).focus();
        }
    }
</script>

<!-- License Key 輸入區 -->
License Key:
<asp:TextBox ID="Number1" runat="server" Width="65" 
    onkeyup="JumpToNextTextBox(this, 'Number2')" MaxLength="5" /> -
<asp:TextBox ID="Number2" runat="server" Width="65" 
    onkeyup="JumpToNextTextBox(this, 'Number3')" MaxLength="5" /> -
<asp:TextBox ID="Number3" runat="server" Width="65" 
    onkeyup="JumpToNextTextBox(this, 'Number4')" MaxLength="5" /> -
<asp:TextBox ID="Number4" runat="server" Width="65" 
    onkeyup="JumpToNextTextBox(this, 'Number5')" MaxLength="5" /> -
<asp:TextBox ID="Number5" runat="server" Width="65" MaxLength="5" />
<br />
<asp:Button ID="BtnVerify" Text="驗證" OnClick="BtnVerify_Click" runat="server" />
<asp:Label ID="LblResult" runat="server" />

關鍵實作細節

後端驗證範例

protected void BtnVerify_Click(object sender, EventArgs e)
{
    // 組合完整 Key
    string key = string.Join("-", 
        Number1.Text, Number2.Text, Number3.Text, Number4.Text, Number5.Text);

    // 移除連字號進行演算法驗證（範例：簡單長度檢查）
    string raw = key.Replace("-", "");
    if (raw.Length == 25 && IsValidLicense(raw))
    {
        LblResult.Text = "授權碼驗證通過！";
        LblResult.ForeColor = System.Drawing.Color.Green;
        // 寫入授權檔、解鎖功能...
    }
    else
    {
        LblResult.Text = "授權碼無效，請重新輸入。";
        LblResult.ForeColor = System.Drawing.Color.Red;
    }
}

private bool IsValidLicense(string rawKey)
{
    // 實際應用：解密、檢查簽章、過期日、硬體指紋綁定等
    // 此處僅示範：假設有效 Key 為 25 個大寫字母數字
    return System.Text.RegularExpressions.Regex.IsMatch(rawKey, @"^[A-Z0-9]{25}$");
}

使用者體驗優化建議

1. 自動大寫：`onkeyup="this.value=this.value.toUpperCase(); JumpToNextTextBox(...)"`
2. 只允許英數：`onkeypress="return /[A-Za-z0-9]/.test(String.fromCharCode(event.keyCode))"`
3. 貼上支援：處理 `onpaste` 事件，自動分割填入五個欄位。
4. 視覺分組：CSS 設定 `text-align: center; letter-spacing: 2px;` 提升可讀性。
5. 無障礙：加上 `License Key` 與 `aria-label`。

效果示意

總結

純前端 JavaScript 即可實現 License Key 分段輸入自動跳欄，配合 `MaxLength`、`ClientIDMode="Static"` 確保相容性。核心驗證邏輯放在伺服器端，確保安全性。此模式廣泛應用於軟體授權、序號兌換、驗證碼輸入等場景。