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


Posted in Javascript onMay 16, 2016

使用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实战教程

Javascript 相关文章推荐
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
jQuery ajax应用总结
Jun 02 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
vue-quill-editor实现图片上传功能
Aug 08 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
Bootstrap所支持的表单控件实例详解
May 16 #Javascript
移动端横屏的JS代码(beta)
May 16 #Javascript
js实现带农历和八字等信息的日历特效
May 16 #Javascript
jQuery 常用代码集锦(必看篇)
May 16 #Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 #Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 #Javascript
javascript实现起伏的水波背景效果
May 16 #Javascript
You might like
PHP实现时间轴函数代码
2011/10/08 PHP
php获取随机数组列表的方法
2014/11/13 PHP
php制作动态随机验证码
2015/02/12 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
python提取页面内url列表的方法
2015/05/25 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
Python发展史及网络爬虫
2019/06/19 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
《雪儿》教学反思
2014/04/17 职场文书
小学社会实践活动总结
2014/07/03 职场文书
个人工作总结范文2014
2014/11/07 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python