用网址图片填充输入 [英] Fill inputs with urls images

问题描述

我有一个显示各种图像的模态.

I have a modal that displays various images.

我还有一个带有5种文本类型输入的表单.单击图像以在活动输入中正确填写网址时如何获取?

I also have a form with 5 text type inputs. How do I get when clicking on an image to fill the url correct in active input?

所有图像标签如下:

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

当前我只能填写一个输入

Currently I can only fill a single input

$('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>

推荐答案

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

You could use focus event to store last input element focused on, use this variable to update input value.

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

Note, button element clicked within form element could cause form to submit

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

这篇关于用网址图片填充输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！