Question

我有这段代码-从url预览图像-效果很好，除了它仅在用户在输入框外单击时运行。我如何更改它，以便当在输入框中输入一个值时它将立即运行。我需要立即显示图像。我认为我需要将onblur更改为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/

后续问题 当我添加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

Answer 1

您需要触发事件oninput而不是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>

从网址输入预览图像

1 个答案: