是否有可能根据用户文本输入更新url链接？ [英] Is it possible to update a url link based on user text input?

问题描述

例如，我知道可以在Javascript中执行一些操作，允许用户根据用户文本输入更新文本：

 < script type =text / javascript> 
 function changeText2（）{
 var userInput = document.getElementById（'userInput'）。value; 
 document.getElementById（'boldStuff2'）。innerHTML = userInput; 
} 
< / script> 
< p>欢迎使用网站< b id ='boldStuff2'>伙计< / b> < / p为H. 
< input type ='text'id ='userInput'value ='Enter Text Here'/> 
< input type ='button'onclick ='changeText2（）'value ='更改文本'/> 
  

查看以上运行的代码：tizag.com/javascriptT/javascript-innerHTML.php

然而，我想知道是否有可能为url链接做类似的事情，而不是上面的代码。下面我一步一步地介绍了用户在输入文字时想要发生的事情：

1. 原始链接：
   http://www.google.com/search?q=




2. 用户在文本字段中输入：
   espn

提交文本字段


3. 最终链接：
   http://www.google.com/search?q=espn

感谢您的帮助...顺便说一句...如果你不能说我有点新手，所以细节是值得赞赏的。

解决

 < a id =反射链接href =http://www.google.com/search> http：//www.google.com/search< / a> 
< input id =searchterm/> 
 
< script type =text / javascript> 
 var link = document.getElementById（'reflectedlink'）; 
 var input = document.getElementById（'searchterm'）; 
 input.onchange = input.onkeyup = function（）{
 link.search ='？q ='+ encodeURIComponent（input.value）; 
 link.firstChild.data = link.href; 
}; 
< / script> 
  

注意：

• 没有内联事件处理程序属性（最好避免它们）;
  

• 分配keyup和change，尝试获取键盘更新确保所有其他更新最终被捕获;
  

• 使用 encodeURIComponent（），必要的如果搜索字词中包含任何非ASCII或URL特殊字符;




• 设置搜索位置（链接）对象的属性，以避免再次写出整个URL;
  

• 设置数据链接内的Text节点的c $ c>以反映完整的URL。 不要 在用户输入中设置 innerHTML ，因为它可能包含HTML特殊字符，如& 和< 中。




For instance, I know that it is possible to do something in Javascript that allows users to update text based on user text input:

<script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>Welcome to the site <b id='boldStuff2'>dude</b> </p> 
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Text'/>

View the above code in action at: tizag.com/javascriptT/javascript-innerHTML.php

However, instead of the above code, I would like to know if it's possible to do something similar for a url link. Below I've placed a step by step example of what I would like to happen upon the user inputing text:

1. Original Link: http://www.google.com/search?q=

2. User Input in Text Field: espn

3. User clicks button to submit text in text field

4. Final Link: http://www.google.com/search?q=espn

Thanks for your help...BTW...if you can't tell I'm a bit of a novice so detail is appreciated.

解决方案

Here's one in plain JS that updates as you type:

<a id="reflectedlink" href="http://www.google.com/search">http://www.google.com/search</a>
<input id="searchterm"/>

<script type="text/javascript">
    var link= document.getElementById('reflectedlink');
    var input= document.getElementById('searchterm');
    input.onchange=input.onkeyup= function() {
        link.search= '?q='+encodeURIComponent(input.value);
        link.firstChild.data= link.href;
    };
</script>

Note:

• no inline event handler attributes (they are best avoided);

• assigning both keyup and change, to try to get keyboard updates as they happen and ensure that all other updates get caught eventually;

• the use of encodeURIComponent(), necessary in case the search term has any non-ASCII or URL-special characters in;

• setting the search property of a Location (link) object to avoid having to write out the whole URL again;

• setting the data of the Text node inside the link to reflect the full URL afterwards. Don't set innerHTML from user input as it may have HTML-special characters like & and < in.

这篇关于是否有可能根据用户文本输入更新url链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！