如何在键入时更新 jQuery 值

How to update jQuery value as you type?

本文关键字：更新 jQuery      更新时间：2023-09-26

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

我需要的是获取图像的src并将其放置在自己的输入中，该输入会随着您的键入而更新。我能够使用以下方法获取src的值：

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

这工作得很好，但是它只在页面加载时应用图像的值，而不是每次img src更改时。有没有办法使每次src更改时该功能都会实时更新？我可能在这里忽略了一些简单的东西，我已经研究了诸如setInterval之类的东西，但我并不是我想要的。任何帮助将不胜感激。

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

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

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

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

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

假设您有用户输入的输入，它会实时修改二维码：

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

然后，您需要做的就是将input事件的事件侦听器附加到此输入，并在该侦听器中调用代码以使用图像的 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() 函数的调用即可。

相关文章：