相思资源网 Design By www.200059.com

使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标,如下图:

  bootstrap布局中input输入框右侧图标点击功能

但是在将图标放入input输入框中,这些小图标是无法获得点击事件的;

那么问题来了,怎样让这些小图标能够获得点击事件呢?

我也不知道,但是可以用一种迂回的方式,来间接的实现该功能

***重点来了:

解决方案:在小图标的位置上,添加一个看不见的元素,元素的大小正好将小图标覆盖,但是没有背景颜色和边框;相当于给小图标盖了一个透明的被子;

复制代码 代码如下:<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>
将事件添加在这个覆盖在小图标上的元素,小图标的作用仅仅是根据需要进行显示和隐藏即可;

如此便间接实现了,小图标的点击效果,是不是很棒的解决方法,谢谢大家的阅读,希望能帮助大家顺利解决问题。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

标签:
bootstrap布局,input输入框图标,图标获得点击事件

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“bootstrap布局中input输入框右侧图标点击功能”

暂无bootstrap布局中input输入框右侧图标点击功能的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。