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更改class和id的方法
Oct 10 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
node 版本切换的实现
Feb 02 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
PHP4之真OO
2006/10/09 PHP
PHP 日期加减的类,很不错
2009/10/10 PHP
php 文章调用类代码
2011/08/11 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
关于document.cookie的使用javascript
2010/10/29 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
初步解析Python中的yield函数的用法
2015/04/03 Python
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
PyMongo安装使用笔记
2015/04/27 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
荷兰手表网站:Watch2Day
2018/07/02 全球购物
教师四风自我剖析材料
2014/09/30 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
python读取mat文件生成h5文件的实现
2022/07/15 Python