Wie erstelle ich ein Etikett mit einem nicht verbundenen Eingabebereich?

Question

Ich habe eine grundlegende Eingabe und Beschriftungen: 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"/>

Wenn ich auf die Beschriftung klicke, wird der Cursor innerhalb der Eingabe gesetzt, was ideal ist.

Mein Tab enthält auch ein Informationssymbol. Wenn ich mit der Maus über das Symbol fahre, erscheint ein Popup (ich brauche also hover, damit es funktioniert).

Auf Mobilgeräten müssen Sie nicht mit der Maus darüber fahren, sondern klicken. Wenn ich jedoch auf dieses Symbol klicke, erscheint ein Popup und der Eingang wird ausgewählt. Wie kann ich die Eingangsauswahl gezielt deaktivieren, wenn ich nur auf das Symbol klicke?

Answer 1

我添加了一些使用 event.preventDefault() 方法的 JavaScript，以确保单击图标时输入不会获得焦点。

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