javascript - 输入图像源并即时显示

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="" />