bootstrap布局中input输入框右侧图标点击功能

更新时间：2016年05月16日 11:14:45 投稿：lijiao

这篇文章主要为大家详细介绍了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实现全选或反选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
浅谈typescript中keyof与typeof操作符用法
本文主要介绍了typescript中keyof与typeof操作符用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
JS简单获得节点元素的方法示例
这篇文章主要介绍了JS简单获得节点元素的方法,结合实例形式分析了javascript获取页面节点元素及修改元素属性相关操作技巧,需要的朋友可以参考下
2018-02-02
JavaScript flash复制库类 Zero Clipboard
开发中经常会用到复制的功能，在 IE 下实现比较简单。但要想做到跨浏览器比较困难了。
2011-01-01
js 两个日期比较相差多少天的实例
下面小编就为大家带来一篇js 两个日期比较相差多少天的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
JavaScript-定时器0~9抽奖系统详解（代码）
这篇文章主要介绍了 JavaScript-定时器0~9抽奖系统，通过代码实例说明函数调用的整体操作，具体步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
2017-08-08
JS性能优化实现方法及优点进行
这篇文章主要介绍了JS性能优化实现方法及优点进行,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
提升PHP安全：8个必须修改的PHP默认配置
这篇文章主要介绍了提升PHP安全：8个必须修改的PHP默认配置,PHP.ini中的默认配置是面向开发者的,如果是生产环境是必须要修改一些配置的,需要的朋友可以参考下
2014-11-11
Document和Document.all区别分析
all是一个集合，包含所有html对像的集合，写一个程式，可以存取到所有的对像。
2008-11-11
TypeScript 中如何限制对象键名的取值范围
TypeScript由微软开发的自由和开源的编程语言，是一种给 JavaScript 添加特性的语言扩展，接下来通过本文给大家介绍TypeScript 中如何限制对象键名的取值范围，感兴趣的朋友跟随小编一起看看吧
2021-05-05