是否可以根据用户文本输入更新URL链接？

Question

例如,我知道可以在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'/>

查看上面的代码:tizag.com/javascriptT/javascript-innerHTML.php

但是,我想知道是否可以为url链接执行类似操作,而不是上面的代码.下面我逐步介绍了用户输入文本时我想要发生的事情:

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

2. 文本字段中的用户输入:espn

3. 用户单击按钮以在文本字段中提交文本

4. 最终链接:http://www.google.com/search？ q = espn

谢谢你的帮助......顺便说一句......如果你不能说我有点新手,那么细节是值得赞赏的.

Answer 1

这是普通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>

注意:

• 没有内联事件处理程序属性(最好避免使用它们);

• 分配键盘和更改,尝试在键盘更新发生时进行更新并确保最终捕获所有其他更新;

• 使用encodeURIComponent()的情况下,搜索项,需要具有任何非ASCII或URL的特殊字符;

• 设置searchLocation(link)对象的属性,以避免再次写出整个URL;

• 设置data链接内的Text节点以反映之后的完整URL.不要设置innerHTML从用户的输入,因为它可能具有HTML的特殊字符,如&和<英寸

Answer 2

#1: 你需要一些表单
#2: 你需要在提交表单时捕获
#3: 根据表单的提交更改 url

这是一个演示：http://jsfiddle.net/maniator/K3D2v/show/
这是代码：http://jsfiddle.net/maniator/K3D2v/embedded/

HTML：

<form id="theForm">
    <input id='subj'/>
    <input type='submit'/>
</form>

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;
}