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

In one of my projects I would like to display an image when I write in my input.

I have already written this code with HTML and Bootstrap which already allows me to display the image when I click on my input :

<div >
     <input  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  id="exempleImage">
     <img  src="<?php echo $chemin ?>assets/img/exemple.png" alt="Chemin de l'AD"/>
</div>

Great ! but when I leave the input the image remains displayed and I need to click again on the input to make it disappear...

Is there a way I can only display it when I'm inside my input with Bootstrap? Or with a JavaScript function?

CodePudding user response：

Using JavaScript onblur

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