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 ...
随机推荐
- 洛谷——P2176 [USACO14FEB]路障Roadblock
P2176 [USACO14FEB]路障Roadblock 题目描述 每天早晨,FJ从家中穿过农场走到牛棚.农场由 N 块农田组成,农田通过 M 条双向道路连接,每条路有一定长度.FJ 的房子在 1 ...
- Xamarin XAML语言教程XAML文件结构与解析XAML
Xamarin XAML语言教程XAML文件结构与解析XAML XAML文件结构 在上文中,我们创建XAML文件后,会看到类似图1.16所示的结构 图1.16 结构 其中,.xaml文件和.xaml ...
- ELK之收集Java日志、通过TCP收集日志
1.Java日志收集 使用codec的multiline插件实现多行匹配,这是一个可以将多行进行合并的插件,而且可以使用what指定将匹配到的行与前面的行合并还是和后面的行合并. 语法示例: inpu ...
- ssm框架 spring的主配置文件 spring-mvc主配置文件 web.xml配置文件(基础的配置文件)
1.spring主配置文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...
- mysql 存储过程时间月份减法
declare startTime VARCHAR(19) default '2014-00-00 00:00:00'; declare tempTime VARCHAR(19) default NO ...
- HBase 基本操作
如何添加列族 很简单,跟rdbms一样 直接用alter,但是alter之前必须先disable这个表 ---->disable 'test' ...
- Linux中的热键[Tab] [Ctrl]-c [Ctrl]-d
Tab键:命令或者文件补全.可以避免很多的输入错误 1. 按一次,文件或命令补全 2. 按两次,会列举出以按键前的字母为首的所有命令或者文件 Ctrl+C:中断目前程序 Ctrl+D:键盘输入结束.可 ...
- 客户端svn出现authorization failed异常
原文:https://blog.csdn.net/big1989wmf/article/details/70144470 发现,原来是 服务端上面 svnserve 这个进程没有启动起来 然后,再试一 ...
- Majority Number
题目描写叙述 链接地址 解法 算法解释 题目描写叙述 Given an array of integers, the majority number is the number that occurs ...
- 设计模式之中介者模式(Mediator)摘录
23种GOF设计模式一般分为三大类:创建型模式.结构型模式.行为模式. 创建型模式抽象了实例化过程.它们帮助一个系统独立于怎样创建.组合和表示它的那些对象.一个类创建型模式使用继承改变被实例化的类,而 ...