预览来自 url 输入的图像

我有这段代码 - 从 url 预览图像 - 它工作得很好，除了它仅在用户单击输入框外部时运行。 我如何更改它，以便在将值放入输入框中时它会立即运行。我需要立即显示图像。 我想我需要改变onblur to onchange但我尝试改变它，但没有成功。

 <input name="input_19" id="input_2_19" type="text" value="" class="medium" placeholder="http://" aria-invalid="false">
    <script> 


     jQuery('#input_2_19').blur(function() {
        var src = jQuery(this).val();

    var previews =  jQuery(".previewImage");
    var drawPreview = true;

    var PreviousSource =  jQuery(this).data('previousSource');

    if(!src.match("^https?://(?:[a-z\-]+\.)+[a-z]{2,6}(?:/[^/#?]+)+\.(?:jpg|gif|png|jpeg)$") && src != "")
    {
          jQuery("#warning").html("Must be an image");
          return false;  
    } else {
         jQuery("#warning").html("");
    }

     jQuery.each(previews , function(index, value) { 
        if (src == "" && PreviousSource == $(value).attr('src'))
        {
              jQuery(value).remove();
             drawPreview = false;
             return false; 
        }
        if( jQuery(value).attr('src') == src)
        {
            drawPreview = false;
            return false;
        }
    });

    if(drawPreview) {
         jQuery('#prev').append('<img class="previewImage" style="max-width:500px;" src="' + src + '">');   
    }
    var previousSource =  jQuery(this).data('previousSource', src);
    });
    </script>

    <div id="warning"></div>
    <div id="prev"></div>

http://jsfiddle.net/W69aA/10/ http://jsfiddle.net/W69aA/10/

后续问题当我添加 URL 时，图像会显示。但如果我更改 URL，那么也会显示另一个图像，并且我有两个图像。我该如何让它只显示一张图像。

另外，为什么此 URL 显示错误：https://ae01.alicdn.com/kf/HTB1q0ucSYrpK1RjSZTEq6AWAVXap/Mifa-Portable-Bluetooth-speaker-Portable-Wireless-Loudspeaker-Sound-System-10W-stereo-Music-surround-Waterproof-Outdoor-Speaker.jpg https://ae01.alicdn.com/kf/HTB1q0ucSYrpK1RjSZTEq6AWAVXap/Mifa-Portable-Bluetooth-speaker-Portable-Wireless-Loudspeaker-Sound-System-10W-stereo-Music-surround-Waterproof-Outdoor-Speaker.jpg

您需要触发事件oninput https://www.w3schools.com/jsref/event_oninput.asp并不是blur。这里是您需要的代码。您可以在此处运行此代码片段。我尝试过并且有效

$('.test').on('input', function() {
  var src = jQuery(this).val();

  var previews = $(".previewImage");
  var drawPreview = true;

  var PreviousSource = $(this).data('previousSource');

  if(!src.match("^https?://(?:[a-z\-]+\.)+[a-z]{2,6}(?:/[^/#?]+)+\.(?:jpg|gif|png|jpeg|webp)$") && src != "") {
    $("#warning").html("Must be an image");
    return false;  
  } else {
    $("#warning").html("");
  }

  $.each(previews , function(index, value) { 
    if (src == "" && PreviousSource == $(value).attr('src')) {
      $(value).remove();
      drawPreview = false;
      return false; 
    }
    if($(value).attr('src') == src) {
      drawPreview = false;
      return false;
    }
  });

  if(drawPreview) {
    $('#prev').append('<img class="previewImage" style="max-width:50px;" src="' + src + '">');   
  }
  
  var previousSource = $(this).data('previousSource', src);
});

.test{
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="0" type="text" class="test" />
<input id="1" type="text" class="test"/>
<input id="3" type="text" class="test"/>

<div id="warning"></div>
<div id="prev"></div>