Comment créer une étiquette avec une section de saisie déconnectée ?

Question

J'ai une entrée de base et des étiquettes : https://codepen.io/agrawalishaan/pen/QWBxBdK

span {
  border: 1px solid red;
}

<label for="myInput">
  I am a label! <span>icon</span>
</label>
<input id="myInput"/>

Lorsque je clique sur l'étiquette, le curseur est placé à l'intérieur de l'entrée, ce qui est idéal.

Mon onglet contient également une icône d'information. Lorsque je survole l'icône, une popup apparaît (j'ai donc besoin de hover pour que cela fonctionne).

Sur les appareils mobiles, il n'y a pas de survol, mais un clic est requis. Cependant, lorsque je clique sur cette icône, une fenêtre contextuelle apparaît et l'entrée est sélectionnée, comment puis-je désactiver spécifiquement la sélection d'entrée en cliquant uniquement sur l'icône ?

Answer 1

J'ai ajouté du JavaScript en utilisant la méthode event.preventDefault() pour garantir que l'entrée n'obtient pas le focus lorsque vous cliquez sur l'icône.

const infoIcon = document.querySelector('.info-icon');
const popup = document.querySelector('#popup');

infoIcon.addEventListener('click', function(event) {
  event.preventDefault(); // prevent default behavior of focusing on the input
  
//toggles the popup on click/touch of the icon
popup.style.display = popup.style.display === 'none' ? 'block' : 'none' 
});

span {
  border: 1px solid red;
}

#popup {
   position:absolute;
   display:none;
   width:50px;
   height:50px;
   border-style:solid;
   background-color:yellow;
}

.info-icon:hover + #popup { /*uses the '+' adjacent child selector to display popup on hover*/
  display: block;
}

  I am a label! icon
  
POP UP