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 ...
随机推荐
- Careercup | Chapter 2
链表的题里面,快慢指针.双指针用得很多. 2.1 Write code to remove duplicates from an unsorted linked list.FOLLOW UPHow w ...
- Linux下安装python3.3.2及configrue、make、make install
一.安装python3.3.2 raspberry的/usr/local/src目录没有权限,可执行如下命令 pi@raspberrypi:~$ sudo chmod -R 777 /usr/loca ...
- ARC下循环引用的问题
最初 最近在开发应用时碰到使用ASIHttpRequest后在某些机器上发不出请求的问题,项目开启了ARC,代码是这样写的: @implement MainController - (void) fe ...
- 获取path的几种方式:NSFileManager NSHomeDirectory NSBundle
//---------------------------------------------------------------------------------NSFileManager *fi ...
- 【bootstrap】bootstrap中的tooltip的使用
先看看效果图:[当光标放在下面这个时间搜索框上时,显示一段文字:搜索时间段中的流水信息] 这样的效果,怎么实现呢? 很简单 1.引入jQuery.js和bootstrap的js和css 2.给想要有t ...
- valid-palindrome——判断带符号数字字母的字符串是否为回文
Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...
- Mysql导出大量数据
outfile 导出文件 select name from t1 into outfile "/tmp/test.txt" infile 导入文件 导入到表t1中的name ...
- linux find prune排除某目录或文件
http://blog.csdn.net/ysdaniel/article/details/7995681 查找cache目录下不是html的文件 find ./cache ! -name '*.ht ...
- Linux CenOS Python3 和 python2 共存
1.查看是否已经安装Python CentOS 7.2 默认安装了python2.7.5 因为一些命令要用它比如yum 它使用的是python2.7.5. 使用 python -V 命令查看一下是否安 ...
- yum安装nginx+PHP+Mysql
#mkdir /var/www/yum_repo 1.nginx安装: 在http://nginx.org/en/linux_packages.html#stable中下载CentOSX对应版本的rp ...