文本输入框按Enter键触发页面重定向的实现方法

实现输入框聚焦时按Enter跳转到指定页面，可参考以下两种无第三方依赖的实现方式：

前置提醒 #

你提供的原始HTML代码中重复声明了两次type="text"属性，建议先删除冗余的1个，避免浏览器解析异常。

方案1：直接监听输入框按键事件（最通用） #

该方案不需要修改现有HTML结构，也不需要依赖form标签，直接通过原生JS绑定事件即可：

实现逻辑 #

• 选中目标输入框元素
• 为输入框绑定keydown事件监听器（只有聚焦状态的元素才会触发键盘事件，无需额外判断聚焦状态）
• 回调中判断按下的按键是否为Enter键
• 匹配到Enter键后执行跳转逻辑

代码示例 #

// 1. 选中输入框，可任选以下一种选择方式
// 方式1：如果你给输入框加了id="searchInput"，用这个
const searchInput = document.getElementById('searchInput');
// 方式2：不用修改HTML，直接通过name属性选择，用这个
const searchInput = document.querySelector('input[name="search"]');

// 2. 绑定键盘事件
searchInput.addEventListener('keydown', function(e) {
  // 判断是否按下Enter键，同时兼容新老浏览器标准
  if (e.key === 'Enter' || e.keyCode === 13) {
    // 若输入框在form标签内，可加这行阻止默认表单提交行为
    e.preventDefault();
    // 替换成你要跳转的目标地址即可
    window.location.href = '你的目标页面地址';
    // 如果需要携带输入框的内容跳转，可用下面的写法，自动编码特殊字符
    // window.location.href = `你的目标地址?q=${encodeURIComponent(searchInput.value)}`;
  }
});

方案2：依托form标签的submit事件（更简洁） #

如果你的输入框可以用form标签包裹，就不需要单独监听按键，form默认会在输入框聚焦按Enter时触发submit事件：

代码示例 #

<!-- 给输入框外层加form标签 -->
<form id="searchForm">
  <input class="center" type="text" style="font-size:20px; border:none; outline:none; " size="105" placeholder="Shrek" name="search" >
</form>

document.getElementById('searchForm').addEventListener('submit', function(e) {
  // 阻止默认表单提交行为
  e.preventDefault();
  // 执行跳转逻辑
  window.location.href = '你的目标页面地址';
});

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