是否有可能根据用户文本输入更新url链接？

例如，我知道这是可以做到的Javascript的东西，可以让用户根据用户的文本输入到文本更新：是否有可能根据用户文本输入更新url链接？

<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链接类似的东西。下面，我放在一个逐步的，我想在用户输入查询文本发生什么步骤例如：

原文链接： http://www.google.com/search?q=
用户输入文本字段： ESPN
用户点击按钮，在文本字段提交文本
最后一个环节： http://www.google.com/search?q=espn

感谢您的帮助...顺便说一句...如果你不能告诉我是一个新手，所以细节表示赞赏。

来源

2011-08-17 Doug

作为“3.用户点击按钮提交的文本字段文本”和“4.最后一个环节”这是否意味着，而不是一个单一的点击，用户必须点击两次在不同的位置，以触发搜索？ – feeela

如果您不需要改变“提交按钮”的内容，你可能会更好过只用一种形式。 http://jsfiddle.net/X2FkH/1/ – circusbred

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

来源

2011-08-17 18:30:08 Neal

你不需要一种形式。它只增加了额外的带宽。 –

@CraigM如果你想要服务器端的支持，你需要一个表单。 – Raynos

有没有服务器端组件到这个问题，因此你不需要的形式。 –

我建议使用跨浏览器库，如jQuery，而不是直的JavaScript。使用jQuery，您可以为按钮添加点击处理程序，获取输入的值，构建您的URL并设置窗口。位置转到新的URL

jsFiddle

HTML

<input type="text" id="q" /> 
<input type="button" id="submit" value="submit" />

的JavaScript

$(function() { 
    $('#submit').click(function() { 
     var url = "http://www.google.com/search?q="; 
     url += $('#q').val(); 
     window.location = url; 
    }); 
});

来源

2011-08-17 18:34:59

这里没有真正的理由在这里使用jQuery ... – Neal

我必须同意@Neal在这一个，问题甚至没有标记jQuery。 – Loktar

@Craig - 也尝试使用form.submit而不是input.click ...否则表单将被提交。 – Neal

你可以试试这个;

<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'/>

Check it out here

来源

2011-08-17 18:42:03 Soren

这里有一个在更新您键入纯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>

注：

没有内嵌的事件处理程序的属性（他们最好避免） ;
分配既KEYUP和变革，以试图让键盘更新，因为它们发生，并确保所有其他更新得到最终被捉住;
使用encodeURIComponent()，在搜索项有任何非ASCII或URL特殊字符的情况下是必要的;
设置位置（链接）对象的search属性以避免必须再次写出整个URL;
设置链接内的文本节点的data事后反映完整的URL。不要设置innerHTML来自用户的输入，因为它可能具有HTML的特殊字符，如&和<在

来源

2011-08-17 18:44:43 bobince

oh ho ho，他得分与input.onchange = input.onkeyup – Loktar

@bobince - 你的部分很好的一对一^ _ ^。我没有添加onkeyup到我的答案，但这是一个很好的补充:-D – Neal

你摇滚人+1正是我想要做的。我试图做的只是不为谷歌，但自定义搜索其他类似的OpenSearch格式的URLS。我检查了反射的链接URL，然后更新link.search =，然后是？=。我试图在网站上的Google Chrome浏览器中模仿“搜索引擎”的行为。谢谢！ – brusso

这是我在几秒钟的事deviced解决方案：

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

没有复杂的JavaScript，不需要额外的引号和功能。只需编辑ID标签以满足您的需求，并且完美地工作。

来源

2012-07-21 17:57:57 andreszs

是否有可能根据用户文本输入更新url链接？

回答

相关问题