如何实现输入追踪编号跳转至指定页面的HTML功能？

直接给你两种可用的实现代码，附带简单说明：

基础版（按钮点击跳转） #

<!DOCTYPE html>
<html>
<head>
    <title>Tracking Number Lookup</title>
</head>
<body>
    <input type="text" id="trackingInput" placeholder="Input your tracking number">
    <button onclick="goToTracking()">Track</button>

    <script>
        function goToTracking() {
            // 获取输入的追踪编号，去除前后空格
            const trackingNumber = document.getElementById('trackingInput').value.trim();
            if (trackingNumber) {
                // 拼接目标链接并跳转
                window.location.href = `https://xxxcargo.com/tracking/${trackingNumber}`;
            } else {
                // 未输入时提示用户
                alert("Please enter a tracking number.");
            }
        }
    </script>
</body>
</html>

各部分说明 #

• 输入框：<input>标签的placeholder属性直接设置你要的提示文本，id用于JavaScript获取输入内容。
• 按钮：通过onclick绑定跳转函数，点击后触发逻辑。
• JavaScript逻辑：先验证输入不为空，再拼接追踪链接实现跳转，空输入时弹出提示。

进阶版（支持回车提交+浏览器自动校验） #

如果需要支持按回车键也能提交，同时让浏览器自动检查输入是否为空，可以用表单实现：

<!DOCTYPE html>
<html>
<head>
    <title>Tracking Number Lookup</title>
</head>
<body>
    <form onsubmit="event.preventDefault(); goToTracking();">
        <input type="text" id="trackingInput" placeholder="Input your tracking number" required>
        <button type="submit">Track</button>
    </form>

    <script>
        function goToTracking() {
            const trackingNumber = document.getElementById('trackingInput').value.trim();
            window.location.href = `https://xxxcargo.com/tracking/${trackingNumber}`;
        }
    </script>
</body>
</html>

额外说明 #

• <form>标签的onsubmit事件先阻止默认表单提交行为，再执行跳转逻辑。
• required属性会让浏览器自动提示用户输入内容，不用手动写提示弹窗。

内容的提问来源于stack exchange，提问作者Özgür Emer