如何用HTML输入框实现同域名下指定端口的页面跳转？

以下是可以正常工作的代码，同时会说明你之前代码的问题：

正确代码 #

<form id="myForm">
    <input type="number" id="portNumber" placeholder="输入端口号.." min="1" max="65535" required>
    <input type="submit" value="跳转">
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const port = document.getElementById('portNumber').value.trim();
    // 动态获取当前页面的协议与域名
    const baseUrl = `${window.location.protocol}//${window.location.hostname}`;
    // 拼接完整地址并跳转
    window.location.href = `${baseUrl}:${port}`;
});
</script>

你之前代码的问题分析 #

1. 第一段表单代码：
   使用POST方法并设置action=":"，表单默认提交逻辑会直接将action值追加到当前URL后，所以得到mysite.com:/，完全没有处理输入的端口值，逻辑错误。

2. 第二段JS代码：

   • 模板字符串使用错误：你用了单引号'${baseUrl}:${port}'，但模板字符串必须用**反引号（`）**包裹，单引号中的变量不会被解析，导致跳转地址是字符串字面量而非拼接后的有效URL。
   • 硬编码域名：写死baseUrl为固定值，无法适配不同部署环境，应该通过window.location动态获取当前页面的协议和域名。
   • 冗余的表单属性：表单的method="post"和action="javascript:void(0)"没必要，因为已经通过event.preventDefault()阻止了默认提交行为。

额外优化说明 #

• 给输入框添加min="1"/max="65535"，限制端口在TCP/UDP的有效范围内（1-65535）。
• 加入required属性，确保用户必须输入端口号才能提交。
• 用trim()处理输入值，避免空格导致的跳转错误。
• 动态获取协议和域名，适配HTTP/HTTPS及不同域名环境。

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