주어진 입력과 연관된 HTML 라벨 찾기

StackOverflow https://stackoverflow.com/questions/285522

  •  08-07-2019
  •  | 
  •  

문제

HTML 양식이 있다고 가정해 보겠습니다.각 입력/선택/텍스트 영역에는 해당하는 <label> 와 더불어 for 컴패니언의 ID로 설정된 속성입니다.이 경우 각 입력에는 단일 레이블만 있다는 것을 알고 있습니다.

예를 들어 onkeyup 이벤트를 통해 javascript의 입력 요소가 있는 경우 관련 레이블을 찾는 가장 좋은 방법은 무엇입니까?

도움이 되었습니까?

해결책

먼저 레이블에 대한 페이지를 스캔하고 실제 양식 요소에서 레이블에 대한 참조를 할당합니다.

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!';

조회 배열이 필요하지 않습니다 :)

다른 팁

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];
   }
}

이있다 labels 속성 HTML5 표준 입력 요소와 관련된 레이블을 가리 킵니다.

그래서 당신은 이와 같은 것을 사용할 수 있습니다 (네이티브 지원 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 당신이 그것을 사용한다면 (독자에게 연습으로 남겨두십시오).
  • 여러 레이블을 사용하는 것은 다양한 사용자 에이전트 및 보조 기술 지원과 관련하여 까다로운 작업이므로 잘 테스트하고 위험을 감수하고 사용하십시오.등.
  • 예, jQuery를 사용하지 않고도 이를 구현할 수도 있습니다.:-)

더 일찍...

var labels = document.getElementsByTagName("LABEL"),
    lookup = {},
    i, label;

for (i = 0; i < labels.length; i++) {
    label = labels[i];
    if (document.getElementById(label.htmlFor)) {
        lookup[label.htmlFor] = label;
    }
}

나중...

var myLabel = lookup[myInput.id];

Snarky Comment : 예, jQuery로도 할 수 있습니다. :-)

jQuery를 사용하면 같은 일을 할 수 있습니다 

var nameOfLabel = someInput.attr('id');
var label = $("label[for='" + nameOfLabel + "']");

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

이것은 가장 단순하고 가장 맛있는 방식으로 질문에 대답합니다. 이것은 바닐라 JavaScript를 사용하며 모든 메인 스트림 적절한 브라우저에서 작동합니다.

당신이 기꺼이 사용한다면 QuerySelector (그리고 심지어 IE9와 때로는 IE8까지 할 수 있습니다!) 다른 방법이 실행 가능해집니다.

양식 필드에 ID가 있고 레이블을 사용하는 경우 for 속성, 이것은 현대 자바 스크립트에서 매우 간단 해집니다.

var form = document.querySelector('.sample-form');
var formFields = form.querySelectorAll('.form-field');

[].forEach.call(formFields, function (formField) {
    var inputId = formField.id;
    var label = form.querySelector('label[for=' + inputId + ']');
    console.log(label.textContent);
});

일부는 여러 라벨에 대해 언급했습니다. 그들이 모두 동일한 값을 사용한다면 for 속성, 그냥 사용하십시오 querySelectorAll 대신에 querySelector 필요한 모든 것을 얻으려면 루프.

$("label[for='inputId']").text()

이를 통해 ID를 사용하여 입력 요소의 레이블을 얻는 데 도움이되었습니다.

GIJS의 답변은 나에게 가장 가치가 있었지만 불행히도 확장은 작동하지 않습니다.

다음은 재 작성 된 확장 기능이 작동하는데 누군가를 도울 수 있습니다.

jQuery.fn.getLabels = function () {
    return this.map(function () {
        var parentLabels = $(this).parents('label').get();
        var associatedLabels = this.id ? associatedLabels = $("label[for='" + this.id + "']").get() : [];
        return parentLabels.concat(associatedLabels);
    });
};

예를 들어 양식 자체의 라벨에 ID를 추가하는 것이 훨씬 쉽습니다.

<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는 작동하려면 신체 온부하 기능이 있어야합니다.

단지 생각, 나에게 아름답게 작동합니다.

이미 언급 된 바와 같이, (현재) 최고 등급의 답변은 레이블 내부에 입력을 포함시킬 가능성을 고려하지 않습니다.

아무도 jQuery-free 답변을 게시하지 않았기 때문에 여기에 내 것이 있습니다.

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 ID 등의 입력 누락)에 대한 점검이 없지만 자유롭게 추가하십시오.

입력이 레이블에 내장 될 때 후행 공간이 종종 존재하기 때문에 라벨 텍스트를 다듬을 수 있습니다.

document.getElementByid ( 'id')를 사용해 보셨습니까?

jQuery 선택기 사용 :

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

미래의 검색 자에게 ... 다음은 jQuery-isified 버전의 FlySwat의 받아 들여진 답변입니다.

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");

나는 이것이 오래된 것을 알고 있지만, 나는 몇 가지 해결책에 어려움을 겪고 이것을 함께 조각했습니다. 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/

나는 내 자신의 필요를 위해 만들었습니다. 누군가에게 유용 할 수 있습니다. 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");
            }
        }
    }
});

나는 아무도 CSS 관계 방법을 사용하겠다고 제안하지 않는다는 것에 약간 놀랐습니까?

스타일 시트에서 요소 선택기에서 레이블을 참조 할 수 있습니다.

<style>

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

</style>

확인란에 'xxx'의 ID가 있으면 jQuery를 통해 레이블을 찾을 수 있습니다.

$('#XXX + label');

.find ( '+ label')를 적용하여 jQuery Checkbox 요소에서 레이블을 반환 할 수도 있습니다. 즉, 루핑시 유용합니다.

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

다른 모든 대답은입니다 극도로 시대에 뒤쳐진!!

당신이해야 할 일은 다음과 같습니다.

input.labels

HTML5는 이미 수년 동안 모든 주요 브라우저에서 지원되었습니다. 당신이 이것을 스스로 처음부터 만들거나 polyfill을 만들어야 할 이유는 전혀 없습니다! 말 그대로 사용하십시오 input.labels 그리고 그것은 당신의 모든 문제를 해결합니다.

베스트 답변은 완벽하게 작동하지만 대부분의 경우 모든 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 입력 옆에 매우 가깝거나 옆에 있으므로 위 함수의 루프는 매우 적은 횟수 만 반복하면됩니다.

파괴 및 암시 적 반품과 같은 ES6 기능을 사용하는 정말 간결한 솔루션을 사용하여 편리한 라이너로 전환 할 수 있습니다. 

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

또는 노드리스트가 아닌 단순히 하나의 레이블을 얻으려면 : 

const getFirstLabel = ({ labels, id }) => labels && labels[0] || document.querySelector(`label[for=${id}]`)
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top