请求实现输入框非空时跳转URL的JavaScript函数

嘿，我来帮你搞定这个问题！作为新手，你遇到的小问题其实很普遍，咱们一步步把功能实现出来，顺便讲清楚每个步骤的道理，方便你理解~

完整可运行代码 #

先给你一套直接能用的代码，之后我再拆解每个部分：

<input type="text" name="url" id="editbox_search" placeholder="输入URL后回车或点击按钮跳转" />
<input type="submit" value="Submit" id="submit_btn" />

<script>
// 获取页面上的文本框和按钮元素
const urlInput = document.getElementById('editbox_search');
const submitBtn = document.getElementById('submit_btn');

// 通用的跳转函数，点击按钮和回车都调用它
function navigateToUrl() {
  // 去掉输入内容前后的空格，避免用户只输入空格的情况
  const targetUrl = urlInput.value.trim();
  
  if (targetUrl) {
    // 如果输入非空，就跳转到目标URL
    window.location.href = targetUrl;
  } else {
    // 空输入时给个友好提示
    alert('请输入有效的URL哦！');
  }
}

// 给按钮绑定点击事件：点击就执行跳转函数
submitBtn.addEventListener('click', navigateToUrl);

// 给文本框绑定键盘事件：按下回车键时执行跳转函数
urlInput.addEventListener('keypress', function(e) {
  // 检查是否按下了回车键（用e.key比keyCode更直观，兼容性也更好）
  if (e.key === 'Enter') {
    navigateToUrl();
  }
});
</script>

关键细节解释（新手必看） #

1. 为什么用通用函数？
   把跳转逻辑单独写成navigateToUrl，不管是点击按钮还是回车，都调用这个函数，避免重复写相同代码，后期改逻辑也只需要改这一处~

2. 为什么要加trim()？
   防止用户只输入空格（比如不小心按了空格键），这种情况也算“空输入”，用trim()去掉前后空格后，就能准确判断是否真的输入了URL。

3. 事件绑定的正确姿势
   用addEventListener是现代JavaScript的标准写法，比直接在HTML里写onclick="xxx"要灵活，而且把JS和HTML分开，代码更整洁。

4. 回车事件的小坑
   你之前尝试的event.keyCode在不同浏览器可能有兼容性问题，现在更推荐用e.key === 'Enter'，直接判断按键的名称，直观又靠谱。另外要注意，函数里要接收事件参数e，不然拿不到按键信息哦！

5. 跳转的核心代码
   window.location.href = targetUrl就是让页面跳转到指定URL的核心语句，和你在地址栏输入URL回车的效果一样。

你之前代码的问题排查 #

你提到写过doKey(e)函数但没成功，大概率是这两个原因：

• 没有给文本框绑定这个键盘事件（比如没写urlInput.addEventListener('keypress', doKey)）
• 直接用了全局的event而不是函数参数e，在有些浏览器里会获取不到正确的按键信息

按照上面的代码来，肯定能正常运行啦！

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