javascript - 使用 url 图像填充输入

Question

我有一个显示各种图像的模式。

我还有一个包含 5 个文本类型输入的表单。单击图像时如何在事件输入中正确填写网址？

所有图像标签如下:

<img data-dismiss="modal" class="img-responsive" src="nameImage.png"/>

目前我只能填写一个输入

$('img').click(function(){
    $('#url_image').val($(this).attr('src'));
})

表格:

<form method="post">
    <button data-toggle="modal" data-target=".bs-example-modal-lg">Show images</button>
    <input type="text" id="url_image" name="url_image" value="">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">

    <input type="submit">
</form>

Answer 1

您可以使用focus事件来存储最后一个聚焦的input元素，使用此变量来更新inputvalue.

请注意，在 form 元素中单击 button 元素可能会导致 form 提交

var focused = null;

$("input").on("focus", function() {
  focused = $(this);
})

$("img").click(function() {
  if (focused.length)
  focused.val($(this).attr("src"));
})

input {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
  <input type="text" id="url_image" name="url_image" value="">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">

  <input type="submit">
</form>
<button data-toggle="modal" data-target=".bs-example-modal-lg">Show images</button>
<img src="http://lorempixel.com/50/50/cats" />
<img src="http://lorempixel.com/50/50/nature" />