输入图像源和即时显示

Question

在下面的示例中，如何使图像源变量与文本输入相关，以便在点击图像链接后立即显示而不重新加载页面？

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

<img src="" />

Answer 1

只需为您的输入分配一个事件，以便在更改时更新图像的src。

下面是一个可运行的代码段。无论何时按输入键，或输入失去焦点，图像都会自动更新。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;