按下回车键时如何携带查询参数跳转至指定网站？

嗨，看来你已经找对方向啦！要实现按下回车键带着搜索框的查询参数跳转到指定网站，你的思路没问题，我帮你把代码优化得更健壮、更规范一些～

基础实现（贴近你的原有写法） #

先看调整后的完整代码，我做了几个实用小改进：

<input id="query" name="query" placeholder="Search" type="text" onkeydown="if (event.key === 'Enter') submitForm()">

<script>
function submitForm() {
  // 获取输入框的值，顺便去除首尾多余空格
  const query = document.getElementById("query").value.trim();
  if (!query) return; // 如果输入为空，就不触发跳转啦
  
  // 对查询参数编码，避免空格、&这类特殊字符破坏URL结构
  const encodedQuery = encodeURIComponent(query);
  // 把下面的地址替换成你要跳转的目标网站
  window.location.href = `https://你的目标网站地址?query=${encodedQuery}`;
}
</script>

这里的优化点：

• 用event.key === 'Enter'替代keyCode == 13，可读性更强，也更符合现代浏览器标准（keyCode已经被标记为废弃啦）
• 给输入值加了trim()，避免用户输入纯空格就跳转
• 新增encodeURIComponent()编码逻辑，防止特殊字符导致的URL异常

更推荐的解耦写法（把JS和HTML分开） #

如果想让代码更易维护，建议把事件监听从HTML里移到JS中，让结构和逻辑分离：

<input id="query" name="query" placeholder="Search" type="text">

<script>
const queryInput = document.getElementById("query");

// 给输入框绑定回车事件
queryInput.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    const query = this.value.trim();
    if (!query) return;
    
    const encodedQuery = encodeURIComponent(query);
    window.location.href = `https://你的目标网站地址?query=${encodedQuery}`;
  }
});
</script>

这种写法让HTML结构更干净，后期修改事件逻辑或者调整输入框结构时会更方便，也更符合前端开发的最佳实践哦～

备注：内容来源于stack exchange，提问作者vizardvictory