dtcms文档 做推广 Netty ipv4 cmake pygame angular ui router vue钩子函数 相亲网站源码 网赚教程下载 前端项目实战 java通用版qq浏览器下载 vm虚拟化引擎 dwf文件怎么转成dwg java接收数组 flutter优缺点 python的extend python打开文件夹 java替换字符串 java怎么写接口 java输出数组 java数组输出 java对象序列化 java输出当前时间 java日期转时间戳 linux系统命令大全 战地女记者 俄罗斯方块c语言代码 kms神龙 深入浅出通信原理 免费家谱制作软件 qq免安装 js分页 ps镜头校正 jarsigner proteus8 正当防卫4存档 操作系统安装 图片转pdf软件 xlwt
当前位置: 首页 > 学习教程  > 

Bootstrap 实现输入框中的 x 按钮删除文本值

2020/10/16 17:43:21 文章标签: bootstrap文本框

bootstrap 的 form-control提供了一个 form-control-feedback类,用于在输入框中显示一个状态,下面的地址有实例: http://www.w3schools.com/bootstrap/bootstrap_forms_inputs2.asp 如果有多个输入框,那么最好用 div 包裹要加载…

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>

本文链接: http://www.dtmao.cc/news_show_300033.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?