如何创建带有断开连接的输入部分的标签？

Question

我有一个基本的输入和标签：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"/>

当我单击标签时，光标设置在输入内部，这是理想的。

我的标签还包含一个信息图标。当我将鼠标悬停在该图标上时，会出现一个弹出窗口（因此我需要 hover 才能工作）。

在移动设备上，没有悬停，而是需要点击。但是，当我点击此图标时，会出现弹出窗口并选择输入，如何在仅单击该图标时专门禁用输入选择？

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