Найти метку html, связанную с данным вводом

Question

Допустим, у меня есть HTML-форма. Каждый input / select / textarea будет иметь соответствующий <label> с атрибутом for, установленным в качестве идентификатора его компаньона. В этом случае я знаю, что каждый вход будет иметь только одну метку.

Учитывая элемент ввода в javascript & mdash; через событие onkeyup, например & mdash; какой лучший способ найти соответствующий ярлык?

Answer 1

Как уже упоминалось, (в настоящее время) рейтинг с наибольшим рейтингом не учитывает возможность встраивания ввода внутри метки.

Поскольку никто не опубликовал ответ без JQuery, вот мой:

var labels = form.getElementsByTagName ('label');
var input_label = {};
for (var i = 0 ; i != labels.length ; i++)
{
    var label = labels[i];
    var input = label.htmlFor
              ? document.getElementById(label.htmlFor)
              : label.getElementsByTagName('input')[0];
    input_label[input.outerHTML] = 
        (label.innerText || label.textContent); // innerText for IE8-
}

В этом примере для простоты таблица поиска непосредственно индексируется входными элементами HTML. Это вряд ли эффективно, и вы можете адаптировать его так, как вам нравится.

Вы можете использовать форму в качестве базового элемента или весь документ, если хотите получить метки для нескольких форм одновременно.

Не выполняется проверка на неправильный HTML (множественные или отсутствующие входы внутри меток, отсутствующий ввод с соответствующим идентификатором htmlFor и т. Д.), Но вы можете добавить их.

Возможно, вы захотите обрезать тексты меток, так как концевые пробелы часто присутствуют, когда ввод встроен в метку.

Answer 2

На самом деле гораздо проще добавить идентификатор к метке в самой форме, например:

<label for="firstName" id="firstNameLabel">FirstName:</label>

<input type="text" id="firstName" name="firstName" class="input_Field" 
       pattern="^[a-zA-Z\s\-]{2,25}$" maxlength="25"
       title="Alphabetic, Space, Dash Only, 2-25 Characters Long" 
       autocomplete="on" required
/>

Тогда вы можете просто использовать что-то вроде этого:

if (myvariableforpagelang == 'es') {
   // set field label to spanish
   document.getElementById("firstNameLabel").innerHTML = "Primer Nombre:";
   // set field tooltip (title to spanish
   document.getElementById("firstName").title = "Alfabética, espacio, guión Sólo, 2-25 caracteres de longitud";
}

Javascript должен быть включен в функцию загрузки тела.

Просто мысль, прекрасно работает для меня.

Answer 3

Все остальные ответы крайне устарели !!

Все, что вам нужно сделать, это:

input.labels

HTML5 уже много лет поддерживается всеми основными браузерами. Нет абсолютно никаких причин, по которым вам придется делать это с нуля самостоятельно или заполнять это! Буквально просто используйте input.labels, и это решит все ваши проблемы.

Answer 4

Используйте селектор JQuery:

$("label[for="+inputElement.id+"]")

Answer 5

Я немного удивлен, что никто не предлагает использовать метод отношений CSS?

в таблице стилей вы можете ссылаться на метку из селектора элемента:

<style>

//for input element with class 'YYY'
input.YYY + label {}

</style>

если флажок имеет идентификатор «XXX» тогда метка будет найдена через jQuery:

$('#XXX + label');

Вы также можете применить .find ('+ label'), чтобы вернуть метку из элемента флажка jQuery, т.е. полезно при зацикливании:

$('input[type=checkbox]').each( function(){
   $(this).find('+ label');
});

Answer 6

Для будущих поисковиков ... Ниже приводится версия принятого ответа FlySwat в формате jQuery:

var labels = $("label");
for (var i = 0; i < labels.length; i++) {
    var fieldId = labels[i].htmlFor;
    if (fieldId != "") {
        var elem = $("#" + fieldId);
        if (elem.length != 0) {
            elem.data("label", $(labels[i]));   
        }
    }
}

Использование:

$("#myFormElemId").data("label").css("border","3px solid red");

Answer 7

Я сделал для себя, может быть кому-нибудь пригодится: JSFIDDLE

$("input").each(function () {
    if ($.trim($(this).prev('label').text()) != "") {
        console.log("\nprev>children:");
        console.log($.trim($(this).prev('label').text()));
    } else {
        if ($.trim($(this).parent('label').text()) != "") {
            console.log("\nparent>children:");
            console.log($.trim($(this).parent('label').text()));
        } else {
            if ($.trim($(this).parent().prev('label').text()) != "") {
                console.log("\nparent>prev>children:");
                console.log($.trim($(this).parent().prev('label').text()));
            } else {
                console.log("NOTFOUND! So set your own condition now");
            }
        }
    }
});

Answer 8

Я знаю, что это старо, но у меня были проблемы с некоторыми решениями, и я собрал их вместе. Я проверил это на Windows (Chrome, Firefox и MSIE) и OS X (Chrome и Safari) и считаю, что это самое простое решение. Он работает с этими тремя стилями прикрепления метки.

<label><input type="checkbox" class="c123" id="cb1" name="item1">item1</label>

<input type="checkbox" class="c123" id="cb2" name="item2">item2</input>

<input type="checkbox" class="c123" id="cb3" name="item3"><label for="cb3">item3</label>

Использование jQuery:

$(".c123").click(function() {
    $cb = $(this);
    $lb = $(this).parent();
    alert( $cb.attr('id') + ' = ' + $lb.text() );
});

Мой JSFiddle: http://jsfiddle.net/pnosko/6PQCw/

Answer 9

Действительно краткое решение, использующее функции ES6, такие как деструктурирование и неявные возвраты, чтобы превратить его в удобный однострочник, будет:

const getLabels = ({ labels, id }) => labels || document.querySelectorAll(`label[for=${id}]`)

Или просто получить один ярлык, а не NodeList:

const getFirstLabel = ({ labels, id }) => labels && labels[0] || document.querySelector(`label[for=${id}]`)

Answer 10

Лучший ответ работает отлично, но в большинстве случаев перебор всех элементов label неэффективен и неэффективен.

Вот эффективная функция для получения label, которая идет с элементом input:

function getLabelForInput(id)
{
    var el = document.getElementById(id);
    if (!el)
        return null;
    var elPrev = el.previousElementSibling;
    var elNext = el.nextElementSibling;
    while (elPrev || elNext)
    {
        if (elPrev)
        {
            if (elPrev.htmlFor === id)
                return elPrev;
            elPrev = elPrev.previousElementSibling;
        }
        if (elNext)
        {
            if (elNext.htmlFor === id)
                return elNext;
            elNext = elNext.nextElementSibling;
        }
    }
    return null;
}

Для меня этой одной строки кода было достаточно:

el = document.getElementById(id).previousElementSibling;

В большинстве случаев label будет очень близко или рядом с входом, что означает, что цикл в вышеприведенной функции должен повторяться очень небольшое количество раз.