实现bootstrap布局的input输入框中的图标点击功能-hello八戒
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了实现bootstrap布局的input输入框中的图标点击功能-hello八戒,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1041字,纯文字阅读大概需要2分钟。
内容图文
使用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布局的input输入框中的图标点击功能-hello八戒全部内容,希望文章能够帮你解决实现bootstrap布局的input输入框中的图标点击功能-hello八戒所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。