如何仅在输入时显示图像

Question

在我的一个项目中，我想在输入时显示一张图片。

我已经用 HTML 和 Bootstrap 编写了这段代码，这已经允许我在单击输入时显示图像：

<div class="form-floating mb-3 bg-image hover-zoom">
     <input class="form-control" id="chemin_ad" name="chemin_ad" type="text" placeholder="Chemin dans l'AD" data-bs-show="collapse" data-bs-target="#exempleImage" aria-expanded="false" aria-controls="exempleImage" />
     <label for="chemin_ad">Chemin dans l'AD</label>
</div>

<div class="collapsing" id="exempleImage">
     <img class="img-fluid" src="<?php echo $chemin ?>assets/img/exemple.png" alt="Chemin de l'AD"/>
</div>

太棒了！但是当我离开输入时，图像仍然显示，我需要再次单击输入以使其消失...

有没有一种方法可以让我只在输入 Bootstrap 时显示它？或者使用 JavaScript 函数？

Answer 1

使用JavaScriptonblur

 <input type=text id=... onblur=document.getElementById('image').hidden = true;>

如何仅在输入时显示图像

How to display an image only when I am in an input

html

javascript

input

twitter-bootstrap