声明一个JavaScript函数，该函数可以隐藏调用HTML元素的标签

这会隐藏相应input的label。

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

jQuery解决方案：

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

+c.p.u1jQuery解决方案可以用现代浏览器（IE>=9）的标准JS编写，如下

<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');
}

请注意，我们需要将input元素作为参数传递给label函数。

小提琴http://jsfiddle.net/jstoolsmith/v5kZb/显示了一种更结构化的方法，并在输入元素失去焦点时替换标签。

这是一个有些迟来的解决方案，只适用于最新/现代的浏览器（基本上不适用于版本8之前的Internet Explorer）。该解决方案实现了显示切换（当input聚焦时隐藏label，当input模糊时恢复）：

版本一，利用DOM结构：

// 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演示。

版本二，使用for属性（而不是DOM结构）：

// 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演示。

很明显，你可以用你喜欢的任何名称来调用相关函数，我称它们为"labelToggle"只是因为我更喜欢一个函数名称来指示该函数在被调用时的作用。

参考文献：

• document.querySelector()
• document.querySelectorAll()兼容性
• CCD_ 10
• CCD_ 11

您的问题不清楚，您想隐藏什么，标签还是文本框？然而，这里有一个想法；它可能会对你有所帮助。

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

Jquery将最适合于此此处演示

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