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 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
Cookie 注入是怎样产生的
Apr 08 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
如何使用JavaScript策略模式校验表单
Apr 29 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的远程图片抓取函数分享
2013/09/25 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
用js实现放大镜效果
2020/10/28 Javascript
python单链表实现代码实例
2013/11/21 Python
Python常用的爬虫技巧总结
2016/03/28 Python
Python中is与==判断的区别
2017/03/28 Python
Python中is和==的区别详解
2018/11/15 Python
详解小白之KMP算法及python实现
2019/04/04 Python
keras中的backend.clip用法
2020/05/22 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
RIP版本1跟版本2的区别
2013/12/30 面试题
物流专业大学应届生求职信
2013/11/03 职场文书
初三开学计划书
2014/04/27 职场文书
毕业生求职信
2014/06/10 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
工程承包协议书范本
2014/09/29 职场文书
个人查摆剖析材料
2014/10/16 职场文书
党员民主评议自我评价
2014/10/20 职场文书
挂靠协议书
2015/01/27 职场文书