Search code examples
javascripthtmlurlinput-fieldaddress-bar

How can I bring input field texts to address bar?


If I type some texts in the input field, how can I bring those texts to address bar ?

for eg : I type abcd to input field, I need address bar like www.google.com/abcd


Solution

  • Try this:

    function updateAddressBar() {
      const inputValue = document.getElementById("inputField").value;
      window.history.replaceState({}, '', `?value=${inputValue}`);
    }
    <form>
      <input type="text" id="inputField" oninput="updateAddressBar()">
    </form>

    The oninput event is used to call the updateAddressBar function whenever the value of the input field changes. The function uses document.getElementById to get the value from the input field, and then window.history.replaceState to update the URL with the new value from the input field.