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

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 上的代码片段似乎无法使用 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')
    );
});

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

How to bind a URL parameter with an input field in Vanilla JS?

html

javascript

url-parameters