查找与给定输入关联的 html 标签

IT技术 javascript html label
2021-02-09 10:49:45

假设我有一个 html 表单。每个 input/select/textarea 都会有一个对应<label>for属性设置为它的同伴的 id。在这种情况下,我知道每个输入将只有一个标签。

给定 javascript 中的输入元素——例如通过 onkeyup 事件——找到它的关联标签的最佳方法是什么?

6个回答

如果你使用 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!';

不需要查找数组:)

这更好,因为我不必保留一个单独的对象 - 关系直接与输入元素一起存储。
2021-03-24 10:49:45
这应该由浏览器处理
2021-04-07 10:49:45
您能解释一下您对 expando 属性的使用与我的不同之处吗?我不使用任何“查找数组”,我使用具有属性的对象。“element.label”、“element['label']”或“lookup['elementId']”之间只有语法上的区别。在幕后,他们是同一件事
2021-04-12 10:49:45

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;
};
不仅在 Chrome 中,它还在 HTML5 标准中
2021-03-16 10:49:45
这应该是waaaay了。谢谢!
2021-03-20 10:49:45

我有点惊讶似乎没有人知道你完全可以这样做:

<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您是否要使用它之类的事情(留给读者作为练习)。
  • 当涉及到不同用户代理和辅助技术的支持时,使用多个标签是一项棘手的工作,因此请好好测试并自担风险等。
  • 是的,您也可以在不使用 jQuery 的情况下实现这一点。:-)
很高兴看到有人提出隐式标签关联,而不是假设元素for总会有一个属性label
2021-03-19 10:49:45

document.querySelector("label[for=" + vHtmlInputElement.id + "]");

这以最简单和最精简的方式回答了这个问题。这使用 vanilla javascript 并适用于所有主流浏览器。

这并没有提供问题的答案。一旦您拥有足够的声誉,您就可以对任何帖子发表评论相反,提供不需要提问者澄清的答案-来自评论
2021-03-14 10:49:45
这绝对为@loki 问题提供了答案,仅仅因为没有进一步的解释,这并不意味着它是错误的或没有尝试回答它。
2021-03-21 10:49:45
希望我能给你10个ups。
2021-03-23 10:49:45
最简单实用的答案!谢谢!
2021-04-08 10:49:45