是否有可能根據用戶文本輸入更新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鏈接？

回答

相關問題