CODEWITHSUNDEEP
javascripthtmlurlinput-fieldaddress-bar
Jith
Jith

Reputation: 33

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

Upvotes: 3

Views: 401

Answers (2)

Han Han
Han Han

Reputation: 428

This can work:

<body>
<p>Typing something...</p>

<input type="text" id="Input1" onkeyup="displayResult()"><!--onkeypress can not function backspace-->
  <br>
<button id="Hite">
  Hite
  </button>
<script>
function displayResult()
{
  var text = "www.google.com";
  
  var Input1Value = document.getElementById("Input1").value;
  
  document.getElementById("Hite").innerHTML = text +"\\"+ Input1Value + "\\";

  
  
}
</script>

I using onkeyup event so when the value of the input changes, it will function to set the text. Also, the reason why I do not using onkeypress is: onkeypress can not function when you press backspace.

Then, if you want to get the address, you can use document.getElementById("Hite").innerHTML to get it (As you did not required to get it)

Upvotes: 0

Kamran Yakubov
Kamran Yakubov

Reputation: 56

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.

Upvotes: 0

Related Questions