在输入变更时追加Img Src

-2

我想制作一个表单，当用户输入到输入框中时，输入框会更改我的图像（这是一个API图像）的src的结尾。在输入变更时追加Img Src

所以图像的代码如下所示：

<img src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100" />

我需要输入由文本数据后去=和&大小之前= 100×100

我已经尝试了几种方法实现这一点的，但还没有完全得到它：

$(function() { 
         $('#linktextbox').onchange(function() { 
          window.location = document.getElementById('baseUrl').attr('href') + '/' + $('#linktextbox').val(); 
          return false; 
         }); 
        });

我也曾尝试：

var link = document.getElementById("baseUrl"); 
    link.href = "http://api.qrserver.com/v1/create-qr-code/?data="+document.getElementById('linktextbox')+"&size=100x100"

任何帮助表示赞赏！

来源

2017-04-24 Nathan Brown

也许ü可能还需要公布这些夫妇的方式ü试图 –

显示你已经尝试过，所以我们可以得到什么你尝试自己 –

@MasivuyeCokile我有一个想法编辑问题 –

你可以不喜欢这样。

显然你需要一个输入和一些东西来确认用户操作，比如我添加的按钮。

编辑：为了不滥用生成图像的服务器我故意选择不使用keyUp事件。

当您单击按钮时，一小段Javascript会更新图像标记的src。

我用ID来标识HTML元素，但是有许多不同的方式来找到特定的元素。

function updateQR(){ 
 
    document.getElementById('image').src = "https://api.qrserver.com/v1/create-qr-code/?data=" + encodeURIComponent(document.getElementById('textInput').value) + "&size=100x100"; 
 

 
}

<input id="textInput" type="text"> 
 
    <br> 
 
    <button onclick="updateQR()">Update QR code</button> 
 
    <br> 
 
    <br> 
 
    <img id="image" src="" />

来源

2017-04-24 16:18:45 Thakkie

您可能想要在textInput数据上执行'encodeURIComponent（）'。 –

是的，你说得对，那完全是我的想法。 – Thakkie

下面的代码在普通的JavaScript

function updateQr(ele){ 
 
    document.getElementById("qr").src = "https://api.qrserver.com/v1/create-qr-code/?data="+encodeURIComponent(ele.value)+"&size=100x100/"; 
 
}

<input type="textbox" value="HelloWorld" onKeyUp="updateQr(this)"/><br/><br/> 
 
<img id="qr" src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100/">

来源

2017-04-24 16:15:03

在输入变更时追加Img Src

回答

相关问题