在輸入變更時追加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

回答

相關問題