如何实现页面跳转时传递并自动填充用户输入值？jQuery/JavaScript方案问询

当然可以实现！不管用原生 JavaScript 还是 jQuery 都能搞定这个跨页面传值并自动填充的需求，下面给你两种常用的实现方案：

这种方法的核心是把 Page1 输入框的值拼在跳转 URL 的参数里，Page2 加载时读取这个参数并填充到输入框中。

原生 JavaScript 实现 #

Page1 代码： #

<input type="text" id="page1Input" placeholder="输入内容">
<button id="jumpBtn">跳转到 Page2</button>

<script>
document.getElementById('jumpBtn').addEventListener('click', function() {
  // 获取输入框的值
  const inputVal = document.getElementById('page1Input').value;
  // 用 encodeURIComponent 处理特殊字符，避免URL解析出错
  window.location.href = `page2.html?input=${encodeURIComponent(inputVal)}`;
});
</script>

Page2 代码： #

<input type="text" id="page2Input" placeholder="自动填充内容">

<script>
// 解析URL参数
const urlParams = new URLSearchParams(window.location.search);
const targetVal = urlParams.get('input');
// 如果获取到值就填充到输入框
if (targetVal) {
  document.getElementById('page2Input').value = decodeURIComponent(targetVal);
}
</script>

jQuery 实现（代码更简洁） #

Page1 代码： #

<input type="text" id="page1Input" placeholder="输入内容">
<button id="jumpBtn">跳转到 Page2</button>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$('#jumpBtn').click(function() {
  const inputVal = $('#page1Input').val();
  window.location.href = `page2.html?input=${encodeURIComponent(inputVal)}`;
});
</script>

Page2 代码： #

<input type="text" id="page2Input" placeholder="自动填充内容">

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
const targetVal = new URLSearchParams(window.location.search).get('input');
if (targetVal) {
  $('#page2Input').val(decodeURIComponent(targetVal));
}
</script>

如果不想把输入值显示在URL里，可以用浏览器的本地存储 localStorage 来暂存数据，Page2 加载时读取并填充。

原生 JavaScript 实现 #

Page1 代码： #

<input type="text" id="page1Input" placeholder="输入内容">
<button id="jumpBtn">跳转到 Page2</button>

<script>
document.getElementById('jumpBtn').addEventListener('click', function() {
  const inputVal = document.getElementById('page1Input').value;
  // 把值存入localStorage
  localStorage.setItem('page1InputValue', inputVal);
  window.location.href = 'page2.html';
});
</script>

Page2 代码： #

<input type="text" id="page2Input" placeholder="自动填充内容">

<script>
const targetVal = localStorage.getItem('page1InputValue');
if (targetVal) {
  document.getElementById('page2Input').value = targetVal;
  // 用完可以删除该存储项，避免下次打开Page2还残留值
  localStorage.removeItem('page1InputValue');
}
</script>

jQuery 实现 #

Page1 代码： #

<input type="text" id="page1Input" placeholder="输入内容">
<button id="jumpBtn">跳转到 Page2</button>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$('#jumpBtn').click(function() {
  const inputVal = $('#page1Input').val();
  localStorage.setItem('page1InputValue', inputVal);
  window.location.href = 'page2.html';
});
</script>

Page2 代码： #

<input type="text" id="page2Input" placeholder="自动填充内容">

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
const targetVal = localStorage.getItem('page1InputValue');
if (targetVal) {
  $('#page2Input').val(targetVal);
  localStorage.removeItem('page1InputValue');
}
</script>

• URL 参数方案的优点是直观，刷新 Page2 后值还在；缺点是值会暴露在URL中，不适合敏感数据。
• localStorage 方案的优点是数据不会显示在URL；缺点是如果用户同时打开多个标签页，可能会出现数据冲突，建议用完就删除存储项。

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