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 中文字符串处理额外注意事项
Nov 15 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
JS异步宏队列微队列原理详解
Sep 09 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 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获取bing每日壁纸示例分享
2014/02/25 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
深入理解js中this的用法
2016/05/28 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
javaScript基础详解
2017/01/19 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
基于python 字符编码的理解
2017/09/02 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
numpy实现RNN原理实现
2021/03/02 Python
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
产品设计开发计划书
2014/05/07 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技