• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >bootstrap > bootstrap布局中input输入框右侧图标点击功能

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含bootstrap fileinput,bootstrap input,bootstrap input样式,bootstrap中input,bootstrap tags input等相关知识,希望在学习及工作中可以帮助到您

使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标,如下图:

  

但是在将图标放入input输入框中,这些小图标是无法获得点击事件的;

那么问题来了,怎样让这些小图标能够获得点击事件呢?

我也不知道,但是可以用一种迂回的方式,来间接的实现该功能。

***重点来了:

解决方案:在小图标的位置上,添加一个看不见的元素,元素的大小正好将小图标覆盖,但是没有背景颜色和边框;相当于给小图标盖了一个透明的被子;

  <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></div>
将事件添加在这个覆盖在小图标上的元素,小图标的作用仅仅是根据需要进行显示和隐藏即可;

如此便间接实现了,小图标的点击效果,是不是很棒的解决方法,谢谢大家的阅读,希望能帮助大家顺利解决问题。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

</div>

您可能想查找下面的文章:

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

相关文章

  • 2017-05-30全面解析多种Bootstrap图片轮播效果
  • 2017-05-30Bootstrap布局方式详解
  • 2017-05-30Bootstrap下拉菜单效果实例代码分享
  • 2018-11-02bootstrapTable 扩展后台合计列
  • 2017-05-30bootstrap table 服务器端分页例子分享
  • 2017-05-30Bootstrap导航条可点击和鼠标悬停显示下拉菜单
  • 2017-05-22Bootstrap 插件概览
  • 2017-05-30Bootstrap教程JS插件弹出框学习笔记分享
  • 2017-05-30全面解析Bootstrap图片轮播效果
  • 2017-05-30JS组件Bootstrap实现下拉菜单效果代码

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Bootstrap table分页问题汇总
    • JS组件Bootstrap实现下拉菜单效果代码
    • JS组件Bootstrap Select2使用方法详解
    • Bootstrap Paginator分页插件使用方法详解
    • JS组件Bootstrap实现图片轮播效果
    • 全面解析bootstrap格子布局
    • Bootstrap每天必学之导航
    • Bootstrap~多级导航(级联导航)的实现效果【附代码】
    • Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
    • 基于BootStrap的图片轮播效果展示实例代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有