Declare a JavaScript function which can hide the label of the calling HTML element

Question

HTML

LABEL1
LABEL2&l         


        

Answer 1

This is a somewhat belated solution, and applies only to more up-to-date/modern browsers (basically, not Internet Explorer before version 8). This solution implements display-toggling (hiding the label when the input is focused, restoring it when the input is blurred):

Version one, taking advantage of the DOM structure:

// gets the first 'form' element:
var parentElement = document.querySelector('form');

function labelToggle (e) {
    // gets the target of the event ('e'),
    // the element that was focused or blurred:
    var self = e.target;
    // if the element has an 'id':
    if (self.id) {
        // get the previous sibling element
        var prev = self.previousElementSibling;
        // if it's 'display: none', change display to 'inline',
        // otherwise change to 'display: none':
        prev.style.display = prev.style.display == 'none' ? 'inline' : 'none';
    }
}

/* using event-delegation to avoid event-binding with a loop,
   using event-capturing to allow for an ancestor to listen for
   the 'non-bubbling' 'focus' and 'blur' events:
*/
parentElement.addEventListener('focus', labelToggle, true);
parentElement.addEventListener('blur', labelToggle, true);

JS Fiddle demo.

Version two, using the for attribute (rather than the DOM structure):

// gets the first 'form' element:
var parentElement = document.querySelector('form');

function labelToggle (e) {
    // gets the target of the event ('e'),
    // the element that was focused or blurred:
    var self = e.target;
    // if the element has an 'id':
    if (self.id) {
        // get the label with the relevant 'for' attribute,
        // using CSS' attribute-equals notation:
        var label = this.querySelector('label[for="' + self.id + '"]');
        // if it's 'display: none', change display to 'inline',
        // otherwise change to 'display: none':
        label.style.display = label.style.display == 'none' ? 'inline' : 'none';
    }
}

parentElement.addEventListener('focus', labelToggle, true);
parentElement.addEventListener('blur', labelToggle, true);

JS Fiddle demo.

Obviously you can call the relevant functions by whatever name you prefer, I call them 'labelToggle' simply because I prefer a function-name to give some indication of what that function does when it's called.

References:

• document.querySelector().
• document.querySelectorAll() compatibility.
• element.addEventListener().
• elementTraversal.previousElementSibling.

Answer 2

Jquery will be best suited for this. Demo here

function hideLabel(element) {
        var name = $(element).attr("class");
        var lab = $("." + name)[0];
        $(lab).hide();

    }

    function showLabel(element) {
        var name = $(element).attr("class");
        var lab = $("." + name)[0];
        $(lab).show();
    }

HTML

 <label class="a">
    Label1</label>
<input type="text" class="a" id="ABC" onfocus="hideLabel(this)" onblur="showLabel(this)" />
<label class="b">
    Label2</label>
<input type="text" class="b" id="DEF" onfocus="hideLabel(this)" onblur="showLabel(this)" />

Answer 3

This hides the label of the corresponding input.

function focus() {
    var labels = document.getElementsByTagName('label');
    for(var i = 0; i < labels.length; i ++) {
        var attr = labels[i].getAttribute('for'); //or labels[i].htmlFor
        if(attr === this.id) {
            labels[i].style.visibility = 'hidden';
            //or labels[i].style.display = 'none';
        }
    }

}

document.getElementById('ABC').addEventListener('focus', focus);
document.getElementById('DEF').addEventListener('focus', focus);

JSFiddle

A jQuery solution:

$('input').on('focus', function() {
    $('label[for=' + this.id + ']').hide();  
});

Answer 4

+c.P.u1 jQuery solution can be written in standard JS for modern browsers (IE >=9) as follows

<label for="ABC">LABEL1</label><input type="text" id="ABC" onFocus="label(this);"/>
<label for="DEF">LABEL2</label><input type="text" id="DEF" onFocus="label(this);"/>

function label (el) {
  (el = document.querySelector ('label[for=" + el.id + '"]')) && 
    (el.style.display = 'none');
}

Note that we need to pass the input element as a parameter to the label function.

The fiddle at http://jsfiddle.net/jstoolsmith/v5kZb/ shows a more structured way of doing this and also replaces the label when the input element loses focus.

Answer 5

Your question is not clear, what you want to hide, label or textbox? However, here is an idea; it might help you.

<label for="ABC">LABEL1</label><input type="text" id="ABC" onFocus="label(this.id);"/>
<label for="DEF">LABEL2</label><input type="text" id="DEF" onFocus="label(this.id);"/>

function label(valID){
    var totalLabel= document.getElementsByTagName('label');
    for(var l = 0; l < totalLabel.length; l++) {
        var lbb= totalLabel[l].getAttribute('for');
        if(lbb === valID) {
            labels[l].style.visibility = 'hidden';
        }
    }
}