Javascript 是否可以根据用户文本输入更新 url 链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7097573/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to update a url link based on user text input?
提问by Doug
For instance, I know that it is possible to do something in Javascript that allows users to update text 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>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
在以下位置查看上面的代码：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:
但是，我想知道是否可以对 url 链接执行类似的操作，而不是上面的代码。下面我放了一个分步示例，说明我希望在用户输入文本时发生的情况：
Original Link: http://www.google.com/search?q=
User Input in Text Field: espn
User clicks button to submit text in text field
Final Link: http://www.google.com/search?q=espn
原始链接：http: //www.google.com/search?q =
文本字段中的用户输入：espn
用户单击按钮以在文本字段中提交文本
最终链接：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.
感谢您的帮助...顺便说一句...如果你不能告诉我有点新手所以细节表示赞赏。
回答by bobince
Here's one in plain JS that updates as you type:
这是一个在你输入时更新的纯 JS 代码：
<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
searchproperty of a Location (link) object to avoid having to write out the whole URL again;setting the
dataof the Text node inside the link to reflect the full URL afterwards. Don'tsetinnerHTMLfrom user input as it may have HTML-special characters like&and<in.
没有内联事件处理程序属性（最好避免使用它们）；
分配 keyup 和 change，以尝试在键盘更新发生时获取它们，并确保最终捕获所有其他更新；
使用
encodeURIComponent(), 以防搜索词中有任何非 ASCII 或 URL 特殊字符；设置
searchLocation（链接）对象的属性以避免再次写出整个 URL；data在链接内设置Text 节点的 以反映完整的 URL。不要innerHTML根据用户输入进行设置，因为它可能具有 HTML 特殊字符，例如&和<in。
回答by Naftali aka Neal
#1: you need some forms
#2: you need to catch when the form is submitted
#3: based on the form's submission change the url
#1：您需要一些表单
#2：您需要在提交表单时捕获
#3：根据表单的提交更改 url
Here is a demo: http://jsfiddle.net/maniator/K3D2v/show/
here is the code: http://jsfiddle.net/maniator/K3D2v/embedded/
这是一个演示：http: //jsfiddle.net/maniator/K3D2v/show/
这里是代码：http: //jsfiddle.net/maniator/K3D2v/embedded/
HTML:
HTML：
<form id="theForm">
<input id='subj'/>
<input type='submit'/>
</form>
JS:
JS：
var theForm = document.getElementById('theForm');
var theInput = document.getElementById('subj');
theForm.onsubmit = function(e){
location = "http://jsfiddle.net/maniator/K3D2v/show/#"
+ encodeURIComponent(theInput.value);
return false;
}
回答by Craig M
I'd suggest using a cross browser library such as jQuery rather than straight JavaScript. With jQuery, you'd add a click handler for your button, grab the value of the input, build your URL, and set window.location to go to the new url
我建议使用跨浏览器库，例如 jQuery 而不是直接的 JavaScript。使用 jQuery，您需要为按钮添加一个点击处理程序，获取输入的值，构建您的 URL，并将 window.location 设置为转到新的 url
HTML
HTML
<input type="text" id="q" />
<input type="button" id="submit" value="submit" />
JavaScript
JavaScript
$(function () {
$('#submit').click(function() {
var url = "http://www.google.com/search?q=";
url += $('#q').val();
window.location = url;
});
});
回答by Soren
You could try this;
你可以试试这个；
<script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
var lnk = document.getElementById('lnk');
lnk.href = "http://www.google.com?q=" + userInput;
lnk.innerHTML = lnk.href;
}
</script>
Here is a link : <a href="" id=lnk>nothing here yet</a> <br>
<input type='text' id='userInput' value='Enter Search String Here' />
<input type='button' onclick='changeText2()' value='Change Link'/>
回答by andreszs
This is the solution I deviced in a matter of seconds:
这是我在几秒钟内完成的解决方案：
<input type="text" name="prog_site" id="prog_site" value="http://www.edit-me.com" />
<a href="#" onclick="this.href=document.getElementById('prog_site').value" target="_blank">Open URL</a>
No complex javascript, no extra quotes nor functions required. Simply edit the ID tag to your needs and it works perfectly.
不需要复杂的 javascript，不需要额外的引号或函数。只需根据您的需要编辑 ID 标签，它就可以完美运行。
