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

【问题标题】：How do I append a url typed into a input text field to an anchor then follow it when anchor is clicked?如何将输入文本字段中的 url 附加到锚点，然后在单击锚点时跟随它？
【发布时间】：2009-09-18 18:46:15
【问题描述】：

我想要一个文本字段，人们可以在其中输入值。然后我想让一个href打开一个带有文本字段的url。

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

我认为 javascript 将是完成此任务的最简单方法，但我只是不知道如何。

【问题讨论】：

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

标签： javascript jquery html forms

【解决方案1】：

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

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

然后，使用 jQuery，它看起来像：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

我更喜欢将 javascript 与标记分开的解决方案。更容易阅读和维护。
我同意 tvanfosson。 onclick 属性多年前已弃用
@Josh：我也同意 tvanfosson，但 onclick 从未被弃用。

【解决方案3】：

这是您想要的与库无关的版本：

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

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

【讨论】：

【解决方案4】：

您要确保不会因为有人决定输入特殊字符而破坏 URL。

因此，请务必使用 URLEncode/Decode 插件包装#appendURL，例如URLEncode

【讨论】：

【解决方案5】：

HTML

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

JQUERY

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

});

【讨论】：