Bootstrapレイアウトを使用して、ログイン名の入力ボックスのワンクリッククリアアイコンや、下の図に示すように、パスワード入力ボックスにパスワードを表示する小さなアイアイコンなど、入力入力ボックスにワンクリッククリアアイコンを追加します。
ただし、入力ボックスにアイコンを入力すると、これらの小さなアイコンがクリックイベントを取得できません。
問題は、これらの小さなアイコンがクリックイベントをどのようにすることができるかということです。
わかりませんが、ラウンドアバウトの方法を使用してこの関数を間接的に実装できます。
***重要なポイントは次のとおりです。
解決策：目に見えない要素を小さなアイコンの位置に追加し、要素のサイズは小さなアイコンを覆うだけですが、背景の色と境界はありません。透明なキルトで小さなアイコンを覆うのと同等です。
次のようにコードをコピーします：<div>
<span> <i> </i> </span>
<入力型= "text" placeholder = "アカウント/携帯電話番号/電子メール" id = "username">
<span style = "display：inline-block;"> </span> < - 小さなアイコン要素 - >
<Span style = "display：inline-block; border：1px solid red; width：30px; height：30px; position：aspolute; right：2px; z-index：100; cursor：pointer;"> </span> <-> span> <
</div>
小さなアイコンに重ねられたこの要素にイベントを追加します。小さなアイコンの機能は、必要に応じて表示して非表示にすることです。
これは間接的に実現されています。小さなアイコンのクリック効果は素晴らしいソリューションですか？あなたの読書をありがとう、そして私はそれがあなたがスムーズに問題を解決するのに役立つことを願っています。
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial