Question

有没有办法从输入区抓取文本并将其放到“href”链接和“download =''”区域的末尾？我在下面添加了示例：

代码：

<input id="username" type="text" value="">

<a class="btn btn-block btn-lg btn-primary" href="http://mypage.com/test/(textarea text here)" download="(textarea text here).png">Download Image</a>

用户输入文字时的结果：

<input id="username" type="text" value="Monster">

<a class="btn btn-block btn-lg btn-primary" href="http://mypage.com/test/Monster" download="Monster.png">Download Image</a>

感谢您的建议。

Answer 1

将'mylink'的ID添加到您的锚标记。

<a id="mylink" class="btn btn-block btn-lg btn-primary" href="http://mypage.com/test/Monster" download="Monster.png">Download Image</a>

然后此代码将设置它。您需要决定要触发href设置的事件。 onblur是一个常见的。

document.getElementById("mylink").href=document.getElementById("username").value;

Answer 2

我创造了一个可能的解决方案。如果你想摆脱变量声明，可能会被最小化，但我喜欢我的代码干净。 https://jsfiddle.net/sctvdL0h/1/

HTML

<input id="username" type="text" value="">

<a class="btn btn-block btn-lg btn-primary" href="" download="(textarea text here).png" id="download_link">Download Image</a>

JS

var input = document.getElementById("username");
var downloadLink = document.getElementById("download_link");
var baseLink = 'http://mypage.com/test/';
var baseFormat = '.png';

var updateLink = function() {
  var currentValue = input.value;
  downloadLink.href  = baseLink + currentValue.toString();
  downloadLink.setAttribute('download', currentValue.toString() + baseFormat); 
};
input.addEventListener("keyup", function() {
  updateLink();
});
input.addEventListener("change", function() {
  updateLink();
});

通过这种方式，您可以进行配置（也可以更改URL和文件扩展名）。这只是一个可能的解决方案而不是唯一的解决方案。

Answer 3

您可以使用Javascript代码。我给你一个例子。

<script>
(function ready() {
  var input = document.getElementById('username'),
      link = document.getElementById('getLink');

  link.onclick = function() {
    link.download = input.value + ".png";
    window.open('http://mypage.com/test/' + input.value,'_blank');
  }
})();
</script>




<input id="username" type="text" value="">
<a id="getLink" class="btn btn-block btn-lg btn-primary" href="">Download Image</a>

抓取文本并将其添加到链接

3 个答案: