Bagaimana untuk membuat label dengan bahagian input yang terputus?

Question

Saya mempunyai input dan label asas: 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"/>

Apabila saya mengklik pada label, kursor ditetapkan di dalam input, yang sesuai.

Tab saya juga mengandungi ikon maklumat. Apabila saya menuding pada ikon, pop timbul muncul (jadi saya perlukan hover untuk ia berfungsi).

Pada peranti mudah alih, tiada tuding, sebaliknya satu klik diperlukan. Walau bagaimanapun, apabila saya mengklik pada ikon ini, pop timbul muncul dan input dipilih, bagaimana saya boleh melumpuhkan pemilihan input secara khusus apabila hanya mengklik pada ikon?

Answer 1

Saya menambahkan beberapa JavaScript menggunakan kaedah event.preventDefault() untuk memastikan input tidak mendapat fokus apabila ikon diklik.

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