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 ...
随机推荐
- AC日记——【模板】最小费用最大流 P3381
题目描述 如题,给出一个网络图,以及其源点和汇点,每条边已知其最大流量和单位流量费用,求出其网络最大流和在最大流情况下的最小费用. 输入输出格式 输入格式: 第一行包含四个正整数N.M.S.T,分别表 ...
- 语音按钮功能之UIButton的UIControlEventTouchUpInside没有执行问题
新版本im功能开发过程中,遇到个奇葩的问题. 就是点击语音按钮,点击一下松开,不执行UIControlEventTouchUpInside的方法.所以导致一直在录音 但是长按2秒以上,是可以执行UIC ...
- react-native 适配问题
const ScreenWidth = Dimensions.get('window').width; static DimensionsTransform(px) { // 设计图纸以750为基准 ...
- Database | SQL
Basic of MySQL 创建数据库: mysql> create database xxj; Query OK, row affected (0.00 sec) 列举数据库: mysql& ...
- luogu P1103 书本整理
题目描述 Frank是一个非常喜爱整洁的人.他有一大堆书和一个书架,想要把书放在书架上.书架可以放下所有的书,所以Frank首先将书按高度顺序排列在书架上.但是Frank发现,由于很多书的宽度不同,所 ...
- ConcurrentHashMap如何保证线程安全
以前看过HashMap的内部实现,知道HashMap是使用Node数组+链表+红黑树的数据结构来实现,如下图所示.但是HashMap是非线程安全,在多线程环境不能够使用. 不过JDK在其并发包中为我们 ...
- IntelliJ IDEA删除所有断点
参考: http://blog.csdn.net/yanziit/article/details/73459795
- Android 检查输入
在开发过程中,会经常遇到这样的需求:上面有很多的输入控件,等所有的输入都合法后,按钮才能自动变成enabled的状态,才能继续下一步的操作. 下面是一种用观察者模式实现的一种解决方案. button代 ...
- IDEA Java/Scala混合项目maven打包
1.首先创建maven项目 2.创建成功后新建class,只有java的,没有scala的 3.修改pom.xml文件,引入scala <?xml version="1.0" ...
- java 图片加水印,设置透明度。说明非常具体
package com.yidao.common; import java.awt.AlphaComposite; import java.awt.Graphics2D; import java.aw ...