如何用JavaScript实现提交输入框后跳转URL并保留输入关键词？

你的问题核心在于：执行window.location.href跳转后，页面会立即重新加载，后续的$("#keyword").val(keyword)根本不会运行；而且新页面是全新的DOM环境，必须从URL的查询参数里提取关键词，再回填到输入框中。

以下是修改后的完整代码：

HTML 部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="keyword">
<button id="js-search">提交</button>

JavaScript 部分 #

// 页面加载完成后，从URL参数提取关键词并回填
$(function() {
    // 解析URL中的查询参数
    const params = new URLSearchParams(window.location.search);
    const keyword = params.get('keyword');
    // 若关键词存在，赋值给输入框
    if (keyword) {
        $("#keyword").val(keyword);
    }
});

// 搜索按钮点击事件
$("#js-search").on('click',function(){
   let keyword = $("#keyword").val().trim();
   // 可选：处理空关键词情况，避免无效跳转
   if (!keyword) {
       alert('请输入搜索关键词');
       return;
   }
   // 对关键词编码，防止特殊字符破坏URL结构
   window.location.href = `/help_center?keyword=${encodeURIComponent(keyword)}`;
})

关键说明 #

1. 页面初始化回填：$(function(){})会在页面DOM加载完成后执行，通过URLSearchParams读取URL里的keyword参数，这是新页面能获取到关键词的核心逻辑。
2. 关键词编码：使用encodeURIComponent()处理关键词，避免空格、&等特殊字符导致参数解析失败。
3. 空值判断：添加简单校验，防止用户点击空关键词跳转。

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