如何将输入字段文本同步至浏览器地址栏？

你可以通过JavaScript监听输入框的内容变化，结合浏览器的History API实现地址栏的实时同步更新，且不会触发页面刷新。以下是具体实现方案：

实现代码 #

HTML结构

<input type="text" id="syncInput" placeholder="输入文本同步到地址栏">

JavaScript逻辑

const input = document.getElementById('syncInput');
// 替换为你的基础域名路径
const basePath = '/';

input.addEventListener('input', function(e) {
  const inputContent = e.target.value.trim();
  // 构造新的路径
  const newPath = inputContent ? `${basePath}${inputContent}` : basePath;
  // 使用replaceState更新地址栏，替换当前历史记录条目
  history.replaceState({}, '', newPath);
});

关键说明 #

• 实时监听输入：input事件可以捕获输入框的所有内容变化，包括键盘输入、粘贴、删除等操作，确保同步的实时性。
• History API的使用：history.replaceState()用于修改地址栏URL且不刷新页面，若需要保留每次输入的历史记录（支持浏览器后退恢复输入状态），可替换为history.pushState()。
• 同源限制：该方法仅能修改与当前页面同源的URL（协议、域名、端口需一致），跨域修改会触发安全错误。若需跳转到外部域名，建议在输入完成后通过按钮触发location.href跳转，但此操作会刷新页面。

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