浅谈<label>与<input>合作的两种方式

最新推荐文章于 2022-06-10 21:11:16 发布

木子耗2009

最新推荐文章于 2022-06-10 21:11:16 发布

阅读量581

点赞数

分类专栏： JS

JS 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<label>标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

1、通过为<input>设置id属性，在<lable>标签中设置for=id来让说明文本和对应的<input>关联起来。

[html]view plaincopy 
   
 <label for="Name">Number:</label>  
 <input type="text" id="Name"/>  

2、<label>包裹<input>标签，点击<label>，<label>响应两次，即<label>本身出发和<input>触发后冒泡到<label>。

[html]view plaincopy 
   
 <body>  
     <label for="input">  
         <input id="input" type="text"/>label  
     </label>  
     <script>  
         var label = document.getElementsByTagName("label")[0];  
         var input = document.getElementById("input");  
         label.addEventListener("click", function() {  
                 alert("label");  
         }, false);  
         input.addEventListener("click", function(e) {  
                 alert("input");  
         }, false);  
     </script>  
 </body>  

输出："label" "input" "label"。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

木子耗2009

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浅谈<label>与<input>合作的两种方式

标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。1、通过为设置id属性，在标签中设置for=id来让说明文本和对应的关联起来。[html] view plain copylabel for="Name">Number:label> input type="text" id="Na
复制链接

扫一扫