javascript - 将输入字段的值添加到 anchor /链接标签

Question

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

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

我想我需要为此使用 jQuery，但不知道在这种情况下如何使用它。有没有人对这件事有任何看法？

顺便说一句，出于安全原因，该值也需要进行 url 编码

Answer 1

我建议，使用 jQuery:

$('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);
        });
    });

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

<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}">

针对问题，在评论中提出:

One question, Can you adapt your awnser to add a unique identifier to the anchor tag <a id="uniqueId" href="">Click</a>?. Forgot to add this to the question

答案当然是'是'，而且很简单(而且比依赖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);
        });
    });

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

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

<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}">

顺便说一句，对于纯 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);

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

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

<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}">

引用资料:

• JavaScript:
  • document.querySelector() .
  • encodeURIComponent() .
  • EventTarget.addEventListener() .
  • HTMLAnchorElement .
• jQuery:
  • next() .
  • on() .