Question

我有一个jQuery QR Code生成器，它根据您在input中键入的文本创建QR码图像。当您更改输入时，QR码和图像源会实时更新。

我需要的是获取图像的src并将其放在您键入的更新内容中。我能够使用这个获得src的值：

var imageSRC = $('.qr-preview img').attr('src');
$('input#code_img_src').val(imageSRC);

这完全没问题，但它只在PAGE LOADS时应用图像的值，而不是每次img src更改时都应用。是否有办法使每次src更改功能实时更新？我可能在这里忽略了一些简单的东西，我研究了setInterval之类的东西，但我并不是我正在寻找的东西。任何帮助将不胜感激。

Answer 1

并非所有浏览器都支持此功能，但这适用于chrome：

$("#.qr-preview img").on("DOMSubtreeModified", function() {
    var imageSRC = $('.qr-preview img').attr('src');
    $('input#code_img_src').val(imageSRC);
});

Answer 2

如果我理解正确，您使用的第三方jQuery插件与输入相关联，并为您生成QR码的URL，并将其分配给另一个图像的src属性。我的回答是假设这是正确的。

假设您输入了用户输入的内容，它会实时修改QR代码：

<input id="qr-input" type="text">

然后您需要做的就是将input event的事件侦听器附加到此输入，并在该侦听器中调用代码以使用图像的src属性的值更新第二个输入：

function updateSrcInput() {
    var imageSRC = $('.qr-preview img').attr('src');
    $('input#code_img_src').val(imageSRC);
}

var timeoutId;
$('#qr-input').on('input', function () {
    if (timeoutId)
        clearTimeout(timeoutId);
    timeoutId = setTimeout(updateSrcInput, 0);
});

请注意，我正在使用超时来确保该函数在插件代码之后运行，并且如果连续发生多个输入事件（例如，如果用户正在快速键入），则只会对您的函数进行一次调用更新其他输入，这意味着你没有浪费工作。

如果您需要第二个输入在文档加载时是正确的，只需在文档加载函数中添加对updateSrcInput()函数的调用。

Answer 3

我认为您应该尝试使用模糊事件进行输入。你可以这样做：

 $('input#code_img_src').blur(function(){
    var imageSRC = $('.qr-preview img').attr('src');
    $(this).val(imageSRC);
 })

如何在键入时更新jQuery值？

3 个答案: