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自定义函数的多种方法
Jan 09 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
js图片切换具体实现代码
Oct 13 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
node实现基于token的身份验证
Apr 09 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 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使用递归函数实现数字累加的方法
2015/03/16 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
Angular2库初探
2017/03/01 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
python获取本机所有IP地址的方法
2018/12/26 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
Python如何对XML 解析
2020/06/28 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
办公室主任职责范文
2013/11/08 职场文书
服务质量承诺书
2014/03/27 职场文书
2014年销售工作总结
2014/12/01 职场文书
领导离职感言
2015/08/03 职场文书
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL