如何将输入字段文本移到地址栏?

huangapple go评论60阅读模式
英文:

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

英文:

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

答案1

得分: 0

这部分是您要翻译的内容:

This can work:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->
    <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>

<!-- end snippet -->

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)

英文:

This can work:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;body&gt;
&lt;p&gt;Typing something...&lt;/p&gt;

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

  
  
}
&lt;/script&gt;

<!-- end snippet -->

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.
<br><br>
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)

答案2

得分: 0

尝试这个:

function updateAddressBar() {
  const inputValue = document.getElementById("inputField").value;
  window.history.replaceState({}, '', `?value=${inputValue}`);
}

oninput事件用于在输入字段的值更改时调用updateAddressBar函数。该函数使用document.getElementById来获取输入字段的值,然后使用window.history.replaceState来使用输入字段的新值更新URL。

英文:

Try this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function updateAddressBar() {
  const inputValue = document.getElementById(&quot;inputField&quot;).value;
  window.history.replaceState({}, &#39;&#39;, `?value=${inputValue}`);
}

<!-- language: lang-html -->

&lt;form&gt;
  &lt;input type=&quot;text&quot; id=&quot;inputField&quot; oninput=&quot;updateAddressBar()&quot;&gt;
&lt;/form&gt;

<!-- end snippet -->

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.

huangapple
  • 本文由 发表于 2023年2月6日 13:22:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/75357580.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定