En uno de mis proyectos, me gustaría mostrar una imagen cuando escribo en mi entrada.

Ya escribí este código con HTML y Bootstrap que ya me permite mostrar la imagen cuando hago clic en mi entrada:

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

Excelente ! pero cuando dejo la entrada, la imagen permanece mostrada y necesito hacer clic nuevamente en la entrada para que desaparezca ...

¿Hay alguna manera de que solo pueda mostrarlo cuando estoy dentro de mi entrada con Bootstrap? ¿O con una función JavaScript?