通过
java
script 的 `history.replacestate()` 方法，可在不刷新页面的前提下，将输入框中的文本动态更新至 url 查询参数中，实现内容与地址栏的实时同步。
在 Web 开发中，有时需要让用户输入的内容即时反映在
浏览器
地址栏（URL）中，既便于分享当前状态，也利于
前端
路由
管理或 SEO 友好性设计。例如，用户在搜索框中输入 abcd，期望地址栏自动变为 https://yoursite.com/?value=abcd —— 这并非跳转新页面，而是
静默更新当前 URL
，保持页面状态不变。
实现该功能的核心是利用 HTML5 History API 中的 window.history.replaceState() 方法。它允许你修改当前历史记录条目的 URL（包括查询参数），而不会触发页面重载。
以下是完整、可直接运行的示例代码：
✅
关键说明：
SEO GPT
免费的白帽SEO，PPC和网站经销商平台
下载
使用 oninput（而非 onchange）确保
实时响应
每一次输入（包括粘贴、删除、中文输入法未确认等）；
encodeURIComponent() 对输入值进行
编码
，防止空格、&、= 等特殊字符导致 URL 解析错误；
replaceState() 不会添加新历史记录，适合“覆盖式”更新；若需支持浏览器后退/前进导航，可改用 pushState() 并配合 popstate 事件监听；
补充了页面加载时从 URL 回填输入框的逻辑，使链接可直接访问并还原状态（提升用户体验与可分享性）。
⚠️
注意事项：
此方法仅修改当前页 URL 的查询字符串（?... 部分），
不能修改协议（http://）、域名或路径（如 /search）
；如需完整路径变更（如 /abcd），需服务端配合或使用前端路由库（如 React Router、Vue Router）；
浏览器地址栏显示的是相对 URL（如 ?value=abcd），完整地址取决于当前页面原始路径（例如原为 https://example.com/search，则更新后为 https://example.com/search?value=abcd）；
避免在 replaceState 中传入空字符串 '' 作为 title 参数（部分旧版 Safari 有兼容问题），推荐传入语义化标题如 'Search Page'。
掌握这一技巧，你就能轻松构建具备 URL 状态同步能力的搜索页、过滤器面板或配置生成器——简洁、高效、无刷新。
输入同步至地址栏