Question

我想将同一页面上的锚点/链接标记输入的输入字段的值附加/添加，链接到外部网站。

<input type="text" name="foo">
<a id="uniqueId" href="http://example.com/{value of foo}">Click</a>

我认为我需要使用jQuery，但在这种情况下不知道如何使用它。有没有人对此事有任何强硬态度？

btw amd出于安全原因，该值也需要进行网址编码

Answer 1

嗯，你可以这样做

$('[name=foo]').blur(function(){
   $('a').attr("href", encodeURIComponent("http://domain.com/" + $(this).val()));
});

一旦输入失去焦点，上面将分配值。

Answer 2

我建议用jQuery：

＆＃13;

$('input[name="foo"]').on('change', function(){
        var self = this,
            $self = $(self),
            link = $self.next();
        link.prop('href', function(){
            this.href = this.protocol + '//' + this.hostname + '/' + encodeURIComponent(self.value);
        });
    });

＆＃13;

a::after {
  content: ' (' attr(href) ')';
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="foo">
<a href="http://example.com/{value of foo}">

＆＃13;

回答这个问题，在评论中提到：

一个问题，您是否可以调整您的awnser为锚标记<a id="uniqueId" href="">Click</a>添加唯一标识符？忘了将此添加到问题

当然，答案是肯定的，＆＃39;并且它相当简单（并且比依赖HTML和遍历的结构更可靠），只需根据其id选择元素：

$('input[name="foo"]').on('change', function(){
        var self = this,
            link = $('#uniqueId');
        link.prop('href', function(){
            this.href = this.protocol + '//' + this.hostname + encodeURIComponent(self.value);
        });
    });

＆＃13;

$('input[name="foo"]').on('change', function(){
        var self = this,
            link = $('#uniqueId');
        link.prop('href', function(){
            this.href = this.protocol + '//' + this.hostname + '/' + encodeURIComponent(self.value);
        });
    });

＆＃13;

a::after {
  content: ' (' attr(href) ')';
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="foo">
<a id="uniqueId" href="http://example.com/{value of foo}">

＆＃13;

顺便说一句，使用普通的JavaScript，这仍然是（当然）很可能：

function appendValueToAnchor () {
  var link = document.getElementById('uniqueId'),
      protocol = link.protocol,
      newValue = encodeURIComponent( this.value );
  link.href = protocol + '//' + link.hostname + '/' + newValue;
}

var input = document.querySelector('input[name="foo"]');

input.addEventListener('change', appendValueToAnchor);

＆＃13;

function appendValueToAnchor () {
  var link = document.getElementById('uniqueId'),
      protocol = link.protocol,
      newValue = encodeURIComponent( this.value );
  link.href = protocol + '//' + link.hostname + '/' + newValue;
}

var input = document.querySelector('input[name="foo"]');

input.addEventListener('change', appendValueToAnchor);

＆＃13;

a::after {
  content: ' (' attr(href) ')';
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="foo">
<a id="uniqueId" href="http://example.com/{value of foo}">

＆＃13;

参考文献：

JavaScript的：
- document.querySelector()。
- encodeURIComponent()。
- EventTarget.addEventListener()。
- HTMLAnchorElement。
jQuery的：
- next()。
- on()。

Answer 3

您只需使用以下

即可

$(function(){

    $('input[name=foo]').on("change",function(){

        var $input = $(this); 
        $('#uniqueId').prop("href","http://example.com/"+$input.val());
        });

    });
});

<input type="text" name="foo"></input>
<a id="uniqueId" href="http://example.com/{value of foo}">Click</a>

希望它有所帮助...

将输入字段的值添加到锚点/链接标记

3 个答案: