label标签不规范导致的input焦点异常

本文关键字: INPUT, LABEL, 焦点

前几天，帮客户仿站。过后出现一个莫名的输入框无法获得焦点的错误。因为是仿过来的站，习惯性的认为是js控制了这个。所以把js找了个遍。但还是没有找到原因。后来发现是label标签不规范导致的错误。如下：

<label>价格：<input name=”price1″ type=”text”/> 到 <input name=”price2″ type=”text”/> 元</label>

因为熟悉不规范的原因 label标签直接内嵌了2个input标签。 当第二个input框获得焦点时，会出发点击label标签 label标签点击后 会触发它关联的控件获得焦点。自动获取了第一个input框。 于是，就出现了当鼠标点击第2个框的时候 会自动跳到第一个框导致错误。解决办法为规范化label标签即可

<label>价格：</label><input name=”price1″ type=”text”/> 到 <input name=”price2″ type=”text”/> 元

<label> 标签为 input 元素定义标注（标记）。

W3C: label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。