輸入圖像源和即時顯示

Question

在以下示例中，如何創建圖像源變量並與文本輸入相關，以便在點擊圖像鏈接後立即顯示而不重新加載頁面？

<input style="text" name="img_link" placeholder="tape your image link" /> 

<img src="" /> 

Answer 1

只需將一個事件分配給您的輸入，以便在其更改時更新圖像的src。

下面有一個可運行的代碼片段。無論何時按下輸入中的某個鍵，或輸入失去焦點時，圖像都會自動更新。

$(function() { 
 
    $("input").get(0).focus(); 
 
    $("input").on("blur keydown", function() { 
 
    $("img").attr("src", $(this).val()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input tyle="text" name="img_link" placeholder="tape your image link" value="http://lorempixel.com/100/100/" /> 
 
<img src="" />