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对象是否可用的最正确方法分析
Oct 03 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
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中的integer类型使用分析
2010/07/27 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
教师评优的个人自我评价分享
2013/09/19 职场文书
简历中的自我评价范文
2014/02/05 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
合同意向书范本
2014/07/30 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
升学宴答谢词
2015/01/05 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
MySQL去除密码登录告警的方法
2022/04/20 MySQL
python计算列表元素与乘积详情
2022/08/05 Python