Bootstrap 实现输入框中的 x 按钮删除文本值
来源:互联网 发布:自贡广电网络 编辑:程序博客网 时间:2024/05/19 13:57
bootstrap 的 form-control提供了一个 form-control-feedback类,用于在输入框中显示一个状态,下面的地址有实例:
http://www.w3schools.com/bootstrap/bootstrap_forms_inputs2.asp
如果有多个输入框,那么最好用 div 包裹要加载×号的输入框以及其 lable 标签和 span 或者 a 标签(用于显示×号);
<div class="has-feedback"> <label class="text-info" for="addressId">输入地址</label> <input class="form-control"id="addressId" name="address"> <!--删除按钮--> <a class="glyphicon glyphicon-remove btn form-control-feedback"style="pointer-events: auto"></a></div>
添加×号后发现不能点击,查看 bootstrap 源码后发现设置了 pointer-events:none(元素永远不会成为鼠标事件的target)。所以在 a 标签中 设置行内样式覆盖它,这样×号就可以点击了
添加 jquery 功能实现
<script type="text/javascript"> $(function () { $('a').click(function () { $('input')[0].value = ""; }) })</script>
0 0
- Bootstrap 实现输入框中的 x 按钮删除文本值
- android 文本输入框文字改变监听-输入值显示,没有值删除按钮消失
- bootstrap 输入框组 通过加减按钮来增加删除内嵌输入框组
- cocos2dx3.x 按钮 输入框
- 用bootstrap实现包含下拉列表、输入框、按钮的组合框
- CSS 设置按钮,文本输入框
- BootStrap中的按钮使用
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版
- 实现选择radio按钮后添加一个文本输入框的示例
- 实现输入框右侧圆形X图标删除输入框内容,以及获取焦点消除hint
- bootstrap入门【按钮式下拉菜单,输入框组】
- abap调用编辑框实现输入长文本、大块文本,并获得编辑框中的内容
- 文本输入和按钮套路
- 重置按钮将输入框中的session值失效
- 点击网页“删除”按钮实现删除数据库中的内容
- HTML单选、多选、按钮、下拉框、文本输入框
- editext文本输入框 软键盘下个按钮的问题
- Spring容器(四)
- leetcode——139——Word Break
- tableView注册cell的三种方式
- POJ - 1125 Stockbroker Grapevine(Floyd)
- Android面试题——ListView(一)
- Bootstrap 实现输入框中的 x 按钮删除文本值
- 例题9-1 UVA - 1025 A Spy in the Metro 城市里的间谍(DP)
- java中Iterator遍历时的删除问题
- MyBatis关联查询(一对一)
- MAC OS X10.10上Android开发环境搭建
- POJ - 2240 Arbitrage(Floyd)
- 32位和64位操作系统的区别
- JAVA中的自定义异常捕获
- java冒泡排序