如何将 URL 参数与 Vanilla JS 中的输入字段绑定？

Question

我有一个运行here 的示例，其中输入由?amount=123 设置

const query = new URL(location).searchParams
const amount = parseFloat(query.get('amount'))

console.log("amount", amount)
document.getElementById('amount').value = amount

<label>
  Amount
  <input id="amount" type="number" name="amount">
</label>

抱歉，运行上面或 JS fiddle 上的代码 sn-p 似乎不适用于 URL 参数。

如果输入发生更改，我希望 URL 也更新，使用新值。我如何在 vanilla JS 中实现这一点？

Answer 1

您可以添加一个input 事件侦听器并使用window.history.replaceState：

const origin = window.location.origin;
const path = window.location.pathname;

input.addEventListener('input', () => {
    // Set the new 'amount' value
    query.set('amount', input.value);
    // Replace the history entry
    window.history.replaceState(
        null,
        '',
        origin + path + '?amount=' + query.get('amount')
    );
});