请求开发：带提交按钮的URL输入框，提交后跳转至指定网站

下面是实现该功能的完整代码，包含HTML、CSS和JavaScript部分，逻辑简洁直接：

HTML 结构 #

<div class="url-input-group">
  <input type="text" id="urlInput" placeholder="输入网址（如https://example.com）">
  <button id="submitBtn">跳转</button>
</div>

CSS 基础样式（可选） #

.url-input-group {
  margin: 20px;
  display: flex;
  gap: 10px;
}

#urlInput {
  padding: 8px 12px;
  flex: 1;
  min-width: 300px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

#submitBtn {
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#submitBtn:hover {
  background-color: #0056b3;
}

JavaScript 逻辑 #

const urlInput = document.getElementById('urlInput');
const submitBtn = document.getElementById('submitBtn');

submitBtn.addEventListener('click', function() {
  let targetUrl = urlInput.value.trim();
  
  // 补全URL前缀：如果输入没有http/https，自动添加https
  if (targetUrl && !/^https?:\/\//i.test(targetUrl)) {
    targetUrl = `https://${targetUrl}`;
  }
  
  if (targetUrl) {
    window.location.href = targetUrl;
  } else {
    alert('请输入有效的网址');
  }
});

功能说明 #

• 支持输入完整URL（带http/https前缀），也可直接输入域名，代码会自动补全https前缀
• 点击按钮时会校验输入内容，为空时弹出提示
• 样式部分为可选配置，可根据页面风格自行调整

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