假设我有一个 html 表单。每个 input/select/textarea 都会有一个对应<label>
的for
属性设置为它的同伴的 id。在这种情况下,我知道每个输入将只有一个标签。
给定 javascript 中的输入元素——例如通过 onkeyup 事件——找到它的关联标签的最佳方法是什么?
假设我有一个 html 表单。每个 input/select/textarea 都会有一个对应<label>
的for
属性设置为它的同伴的 id。在这种情况下,我知道每个输入将只有一个标签。
给定 javascript 中的输入元素——例如通过 onkeyup 事件——找到它的关联标签的最佳方法是什么?
如果你使用 jQuery 你可以做这样的事情
$('label[for="foo"]').hide ();
如果您不使用 jQuery,则必须搜索标签。这是一个将元素作为参数并返回相关标签的函数
function findLableForControl(el) {
var idVal = el.id;
labels = document.getElementsByTagName('label');
for( var i = 0; i < labels.length; i++ ) {
if (labels[i].htmlFor == idVal)
return labels[i];
}
}
首先,扫描页面上的标签,并从实际的表单元素中分配对标签的引用:
var labels = document.getElementsByTagName('LABEL');
for (var i = 0; i < labels.length; i++) {
if (labels[i].htmlFor != '') {
var elem = document.getElementById(labels[i].htmlFor);
if (elem)
elem.label = labels[i];
}
}
然后,你可以简单地去:
document.getElementById('MyFormElem').label.innerHTML = 'Look ma this works!';
不需要查找数组:)
HTML5 标准中有一个labels
属性指向与输入元素关联的标签。
所以你可以使用这样的东西(支持本机labels
属性,但在浏览器不支持的情况下检索标签的回退)......
var getLabelsForInputElement = function(element) {
var labels = [];
var id = element.id;
if (element.labels) {
return element.labels;
}
id && Array.prototype.push
.apply(labels, document.querySelector("label[for='" + id + "']"));
while (element = element.parentNode) {
if (element.tagName.toLowerCase() == "label") {
labels.push(element);
}
}
return labels;
};
// ES6
var getLabelsForInputElement = (element) => {
let labels;
let id = element.id;
if (element.labels) {
return element.labels;
}
if (id) {
labels = Array.from(document.querySelector(`label[for='${id}']`)));
}
while (element = element.parentNode) {
if (element.tagName.toLowerCase() == "label") {
labels.push(element);
}
}
return labels;
};
如果您使用 jQuery,那就更容易了...
var getLabelsForInputElement = function(element) {
var labels = $();
var id = element.id;
if (element.labels) {
return element.labels;
}
id && (labels = $("label[for='" + id + "']")));
labels = labels.add($(element).parents("label"));
return labels;
};
我有点惊讶似乎没有人知道你完全可以这样做:
<label>Put your stuff here: <input value="Stuff"></label>
任何建议的答案都不会被采纳,但会正确标记输入。
下面是一些考虑到这种情况的代码:
$.fn.getLabels = function() {
return this.map(function() {
var labels = $(this).parents('label');
if (this.id) {
labels.add('label[for="' + this.id + '"]');
}
return labels.get();
});
};
用法:
$('#myfancyinput').getLabels();
一些注意事项:
aria-labelledby
您是否要使用它之类的事情(留给读者作为练习)。document.querySelector("label[for=" + vHtmlInputElement.id + "]");
这以最简单和最精简的方式回答了这个问题。这使用 vanilla javascript 并适用于所有主流浏览器。