Label标签 自动触发onclick,点击内部的Input
最近项目遇到了一个bug,点击外层元素会直接触发元素内部的input框。(外层元素用的是label包裹的)。找了很久才发现是label标签造成的。
label定义和用法:
label 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
label 标签的 for 属性应当与相关元素的 id 属性相同。
label最好不要包裹表单控件。
Label标签 自动触发onclick,点击内部的Input的更多相关文章
- JQuery模拟点击页面上的所有a标签,触发onclick事件
注意: 这种方法需要给所有的a标签加上id属性 页面加载完成模拟点击所有的a标签: <script> $(function () { // 模拟点击页面上的所有a标签,触发onclick事 ...
- 巧妙利用label标签实现input file上传文件自定义样式
提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可 但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同 我们往 ...
- React中 checkbox 与 label 标签的搭配
用<label>标签替代checkbox的点击样子,点击<label>实际上就是点击checkbox checkbox的checked值会跟着一起变 <input typ ...
- label标签内含有input元素,点击事件会触发两次
**label标签内含有input元素,点击事件会触发两次** 如果你的结构是label内写input实现点击文字时候input也有相应.并且,把事件设置在了label上,那么就会执行两次了. //h ...
- 在js中拼接<a>标签,<a>标签中含有onclick事件,点击无法触发该事件
我们在<a>标签中添加事件一般是onclick="editUser()" 这样添加,在html页面上是行的通的 但是如何你是在js中拼接<a>标签并在< ...
- a标签中的label在IE下触发不了a标签的href链接(label标签——解析)
<a href="http://www.baidu.com/" target="_blank"> <span>百度</span&g ...
- 解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
问题描述: 在IE8及以下版本时,点击label标签无法自动触发checkbox的click事件,导致无法产生希望的效果. 原HTML代码: <div class="col-s ...
- js 父子标签同时设置onclick,子标签触发父标签onclick解决办法
js 父子标签同时设置onclick,子标签触发父标签onclick 或 子标签为a 先触发onclick 再触发 a 的 href: 解决方案:在子标签的onclick里写 var ev = win ...
- label标签的显示和隐式关联问题
按钮的html <!-- 学校 --> <div class="layui-inline"> <label class="layui-for ...
随机推荐
- LeetCode OJ——Word Ladder
http://oj.leetcode.com/problems/word-ladder/ 图的最短路径问题,可以用最短路径算法,也可以深搜,也可以广搜. 深搜版本: 第一次写的时候,把sum和visi ...
- bzero 字符数组清零
原来bzero()是这个功能,学习啦.下面的文章可以好好参考,出处:http://hi.baidu.com/wg_wang/item/5fa42c15c73b8efa9c778af8 bzero &a ...
- AC日记——花店橱窗布置 codevs 1028
题目描述 Description 假设以最美观的方式布置花店的橱窗,有F束花,V个花瓶,我们用美学值(一个整数)表示每束花放入每个花瓶所产生的美学效果.为了取得最佳的美学效果,必须使花的摆放取得最大的 ...
- php解析json字符串变量总是空白null
通过接口获取的json字符串使用json_decode始终无法正确解析,返回空白. 直接把结果字符串复制出来手动创建一个变量却正常,在前端js也能解析,搞了半天不得其解,最后发现是接口输出的结果包含有 ...
- 小程序-引用其他js文件
我也是小白菜,之所以有这个记录是因为我做项目时遇到了这个问题 流程: 1.需要建立一个js文件 content.js function myContent() { console.log(&quo ...
- 在线扩展根分区 red hat 4.8.3-9
跑程序的时候发现报错,提示空间不足,仔细查看后发现是根分区已满 27G的空间只有20k剩余 考虑从/data分区压缩一点空间到/分区 切换到root用户 执行下面的命令 1. umount /data ...
- 转---派遣例程与IRP结构
派遣例程与IRP结构 文章出处:http://www.cnblogs.com/zmlctt/p/3978124.html#commentform 提到派遣例程,必须理解IRP(I/O Requ ...
- 通过XOML或者XAML的方式创建和启动工作流
在Workflow Foundation中,提供了多种设计工作流的方式.例如 纯代码的方式(C#) 代码分离的方式(XOML+C#) 以上两种,可以从Visual Studio提供的项目模板中选择 他 ...
- 通配符、正则表达式、python去重
1.linux通配符 *:代表所有字符(0到多个); ?:代表一个字符; ;:连续不同命令之间的分隔符; #:配置文件注释; |:管道; ~:当前用户的家目录; -:上一次所在的路径; $:变量前面需 ...
- Java 正则表达式的使用
Java 正则表达式的使用 java.util.regex 包主要包括以下三个类: Pattern 类: pattern 对象是一个正则表达式的编译表示.Pattern 类没有公共构造方法.要创建一个 ...