如何从输入字段生成图像

How to href an image from an input field?

本文关键字：图像 字段 输入      更新时间：2023-09-26

我试图从图像的href中的输入表单获得URL。它不能与onkeyup一起工作。有人知道这是怎么回事吗?这是我使用的代码:

//Twitter
function addtwitter()
 {
var twitter = document.getElementById("twitter");
var s =twitter.value;
document.getElementById("twimg").style.display= "inline";
document.getElementById("tw").href= s;
}
//LinkedIn
function addlinkedin()
 {
var linkedin = document.getElementById("linkedin");
var s =linkedin.value;
document.getElementById("limg").style.display= "inline";
document.getElementById("li").href= s;
}
<form>
<div><label>Your Twitter Url:</label></div>
        <input class="inline" id="twitter" type="text" name="twitter" onKeyup="addtwitter()">
        <br>
        <div><label>Your LinkedIn Url:</label></div>
        <input class="inline" id="linkedin" type="text" name="linkedin" onKeyup="addlinkedin()">
        <br>
</form>
<br>
<div>
<span id="tw" href="#"><img id="twimg" border="0" src="http://image000.flaticon.com/icons/svg/145/145812.svg" width="25" height="25" alt="Twitter" style="vertical-align: middle"></span>
<span id="li" href="#"><img id="limg" border="0" src="http://image000.flaticon.com/icons/svg/145/145807.svg" width="25" height="25" alt="LinkedIn" style="vertical-align: middle;"></span>
</div>

你应该使用setAttribute()函数来设置href的值，但是span不会像链接一样。
尽管使用span，您可以使用锚标记，或者您可以在span中使用锚标记。下面是修改后的代码:


建议:在oblur事件上调用addtwitter()和addlinkdin()函数。

<form>
<div><label>Your Twitter Url:</label></div>
        <input class="inline" id="twitter" type="text" name="twitter" onblur="addtwitter()">
        <br>
        <div><label>Your LinkedIn Url:</label></div>
        <input class="inline" id="linkedin" type="text" name="linkedin" onblur="addlinkedin()">
        <br>
</form>
<br>
<div>
<a id="tw" href="#"><span><img id="twimg" border="0" src="http://image000.flaticon.com/icons/svg/145/145812.svg" width="25" height="25" alt="Twitter" style="vertical-align: middle"></span></a>
<a id="li" href="#"><span><img id="limg" border="0" src="http://image000.flaticon.com/icons/svg/145/145807.svg" width="25" height="25" alt="LinkedIn" style="vertical-align: middle;"></span></a>
</div>

href是一个属性，需要使用setAttribute函数设置。更正后的代码如下:

//Twitter
function addtwitter()
{
  var twitter = document.getElementById("twitter");
  var s =twitter.value;
  document.getElementById("twimg").style.display= "inline";
  document.getElementById("tw").setAttribute('href',s);
}
//LinkedIn
function addlinkedin()
{
  var linkedin = document.getElementById("linkedin");
  var s =linkedin.value;
  document.getElementById("li").setAttribute('href',s);
  document.getElementById("limg").style.display= "inline";
}

希望这对你有帮助!

相关文章：