入力セクションが切断されたラベルを作成するにはどうすればよいですか?

Question

基本的な入力とタグがあります: https://codepen.io/agrawalishaan/pen/QWBxBdK

リーリー リーリー

ラベルをクリックすると、カーソルが入力内に設定されます。これは理想的です。

私のタグには情報アイコンも含まれています。アイコンの上にカーソルを置くと、ポップアップが表示されます (そのため、これを機能させるには hover が必要です)。

モバイル デバイスでは、ホバリングの代わりにクリックが必要です。ただし、このアイコンをクリックするとポップアップが表示され、入力が選択されます。アイコンをクリックするだけで入力選択を具体的に無効にするにはどうすればよいですか?

Answer 1

event.preventDefault() メソッドを使用して JavaScript を追加し、アイコンがクリックされたときに入力にフォーカスが当たらないようにしました。

const infoIcon = document.querySelector('.info-icon');
const ポップアップ = document.querySelector('#popup');

infoIcon.addEventListener('click', function(event) {
  event.preventDefault(); // 入力にフォーカスするデフォルトの動作を防止します
  
// アイコンのクリック/タッチでポップアップを切り替えます
Popup.style.display = Popup.style.display === 'none' ? 'block' : 'none'
});

スパン{
  境界線: 1 ピクセルの赤一色。
}

＃ポップアップ {
   位置:絶対;
   ディスプレイ:なし;
   幅:50ピクセル;
   高さ:50ピクセル;
   境界線のスタイル:実線;
   背景色:黄色;
}

.info-icon:hover #popup { /* 隣接する子セレクター ' ' を使用して、ホバー時にポップアップを表示します*/
  表示ブロック;
}

  私はラベルです! icon
  ＃＃＃ポップアップ＃＃＃