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

Question

我想要一个文本字段，人们可以在其中输入值。 然后我想要一个href打开一个URL，文本字段附加到末尾。

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

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

Answer 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）。

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

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

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

Answer 4

您希望确保不破坏URL，因为有人决定放入特殊字符。

因此，请确保将#appendURL与URLEncode / Decode插件包装在一起，例如URLEncode

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

}）;