如何使用特定密码/Code实现网页输入代码后自动重定向功能

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Code验证跳转</title>
</head>
<body>
    <div>
        <label>Insert Code:</label>
        <input type="text" id="codeInput" placeholder="Placeholder">
        <button id="submitBtn">提交</button>
    </div>

    <script>
        // 预设Code和对应跳转路径的映射，可自行添加多组规则
        const redirectMap = {
            // 把这里的"your_specified_code"换成你实际要求用户输入的指定Code
            "your_specified_code": "../Page3/Page3.html"
            // 可新增多组规则，示例："code2": "./otherPage.html"
        }

        const codeInput = document.getElementById('codeInput')
        const submitBtn = document.getElementById('submitBtn')

        // 按钮点击触发验证
        submitBtn.addEventListener('click', verifyAndRedirect)
        // 输入框按回车触发验证，不需要可删除这段
        codeInput.addEventListener('keydown', (e) => {
            if(e.key === 'Enter') verifyAndRedirect()
        })

        // 验证+跳转核心逻辑
        function verifyAndRedirect() {
            const inputCode = codeInput.value.trim()
            if(redirectMap[inputCode]) {
                // 匹配到Code，执行跳转
                window.location.href = redirectMap[inputCode]
            } else {
                // 未匹配到的提示，可自行修改为页面内文字提示
                alert('Code输入错误，请检查后重试')
                codeInput.focus()
            }
        }
    </script>
</body>
</html>

配置说明 #

• 仅需修改redirectMap里的键值对即可，键是要求用户输入的指定Code，值是对应要跳转的目标页面路径，支持添加多组不同的Code对应不同跳转路径
• 大小写适配：当前代码默认区分Code大小写，如果需要不区分大小写，可以把inputCode转成全小写/全大写，同时redirectMap的键也统一设置为小写/大写即可
• 不需要回车触发验证的话，直接删除对应的keydown事件监听代码即可

内容的提问来源于stack exchange，提问作者codenecaises