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

}）;

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

5 个答案: