Javascript 如何将输入文本字段中键入的url附加到锚，然后在单击锚时跟随它？

我想有一个文本字段，人们可以在其中键入值。然后我想让a href打开一个url，并将文本字段附加到末尾

因此，如果文本字段显示“大象”，那么当他们单击链接时，将打开一个页面，显示example.com/elephant

---

我认为javascript是实现这一点的最简单方法，但我不知道如何实现。

我假设您有一些类似于以下内容的HTML，并希望在单击锚定标记时将appendUrl输入字段的内容附加到锚定标记中的url

<a href="/base/url" id="baseUrl">Link Text</a>
<input type="text" id="appendUrl" />

基本思想是提取输入值并将其附加到href中的url。使用这样构造的值来设置当前窗口的位置。我在单击处理程序中返回false，以防止执行默认操作（仅基本url）。

<input type="text" id="suffix" />
<a href="http://example.com/" onclick="document.location.href = $(this).attr('href')+$('#suffix').val(); return false;">click me</a>

您希望确保不会因为有人决定输入特殊字符而中断URL

---

因此，请确保使用URLEncode/Decode插件（如此插件）包装#appendURL这里是您想要的与库无关的版本：

您的HTML：

<input type="text" name="url_param" id="url_param" />
<input type="button" onclick="prepare_link();" value="Do it!" />

<a href="http://whatever.com" id="target_link">Click Your New Link!</a>

您的Javascript：

<script type="text/javascript">
     function prepare_link() {
          var url_param = document.getElementById('url_param');
          var target_link = document.getElementById('target_link');

          if ( ! url_param.value ) {
               return false;  
          }

          target_link.href = target_link.href + '/' + escape(url_param.value);
     }
</script>

函数prepare_link（）{
var url_param=document.getElementById（'url_param'）；
var target_link=document.getElementById（'target_link'）；
如果（！url_param.value）{
返回false；
}
target_link.href=target_link.href+'/'+转义（url参数值）；
}

这不是编写代码的最干净的方法，也不是我将如何编写代码，但我尝试以最通用的方式使其尽可能简单，以便您能够理解代码。

<a href="/base/url" id="stndrUrl">Sample text</a><input type="text" id="appendUrl" name=""/>

---

}))

我更喜欢将javascript与标记分开的解决方案。更容易阅读和维护。我同意tvanfosson的观点。

onclick

属性已被弃用多年ago@Josh：我也同意tvanfosson，但从来没有人反对过

onclick

。显然，我还没有足够的声誉来编辑一个问题，所以我建议在这里进行修改。我认为jquery应该从标记列表中删除。他的问题完全与库无关，但在问题上使用jquery标记已经使一些答案倾向于使用jquery。如果问题写为“如何在JQuery中做到这一点？”，那么我认为这个标签是合适的。既然它不是，那么我认为它应该被移除。

<a href="/base/url" id="stndrUrl">Sample text</a><input type="text" id="appendUrl" name=""/>

 $(document).ready(function(){
   $('#stndrUrl').click( function() {
    window.location = $(this).attr('href') + '/' + $('#appendUrl').val();
    return false;
});