ブートストラップの入力ボックスにアイコンクリック機能を実装layout_html/css_WEB-ITnose

ブートストラップ レイアウトを使用すると、ログイン名入力ボックスにワンクリック クリア アイコン、パスワード入力ボックスにパスワードを表示する小さな目のアイコンなど、入力入力ボックスにワンクリック クリア アイコンを追加できます。以下に示すように:

しかし、アイコンが入力ボックスに置かれると、これらの小さなアイコンはクリックイベントを取得できません

それでは、問題は、これらの小さなアイコンがどのようにしてクリックイベントを取得できるのかということです。

私にも分かりませんが、この機能は遠回しに間接的に実装することができます。

ここが重要なポイントです:

小さなアイコンの位置に非表示の要素を追加します。要素のサイズは小さなアイコンを覆うだけですが、背景色や境界線はありません。これは小さなアイコンを覆うのと同じです。透明なキルト付き;

<div class="input-group">　　<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>　　<input type="text" class="form-control" placeholder="账号/手机号/邮箱" id="userName">　　<span class="glyphicon glyphicon-remove-circle form-control-feedback" style="display:inline-block;"></span> <--小图标元素-->　　<span style="display:inline-block;border:1px solid red;width:30px;height:30px;position:absolute;right:2px;z-index:100;cursor: pointer;"></span> <--覆盖在小图标上面的元素--></div>

小さなアイコンの機能は、必要に応じて表示したり非表示にしたりするだけです。間接的に達成されました。