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 相关文章推荐
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 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.ini 中文版
2006/10/28 PHP
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
js实现星星打分效果
2020/07/05 Javascript
python脚本开机自启的实现方法
2019/06/28 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
外科实习自我鉴定
2013/10/06 职场文书
机修工岗位职责
2013/11/24 职场文书
综合实践活动方案
2014/02/14 职场文书
广告创意求职信
2014/03/17 职场文书
体育教师求职信
2014/05/24 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers