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 相关文章推荐
jQuery ajax cache缓存问题
Jul 01 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
JS中substring与substr的用法
Nov 16 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 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中的正规表达式(二)
2006/10/09 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
django settings.py 配置文件及介绍
2019/07/15 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
python实现字符串和数字拼接
2020/03/02 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
批评与自我批评总结
2014/10/17 职场文书
模范教师材料大全
2014/12/16 职场文书
护士2015年终工作总结
2015/04/29 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL