Question

我想创建一个表单，当用户键入输入框时，输入框会更改图像的src结尾（这是一个API图像）。

因此图像代码如下所示：

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

我需要文本框中的输入来追踪数据=并且在＆amp; size = 100x100之前

我已经尝试了几种方法来实现这一目标，但还没有完成它：

$(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"

感谢任何帮助！

Answer 1

你可以这样做。

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

编辑：为了不滥用生成图像的服务器，我故意选择不使用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="" />

Answer 2

这里是纯JavaScript的代码

＆＃13;

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

＆＃13;

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

＆＃13;

在输入变化上附加Img Src

2 个答案: