jquery - 模糊/隐藏焦点上的标签

Question

我有这个无法更改的客户表格（由其他人编码） -

<p class="postal">
    <label for="postalcode">post code</label>
    <input id="postalcode" name="postalcode" type="text" value=""/>
</p>

现有的 CSS 规定标签设置在输入“内”。所以我需要模糊/隐藏标签。

我已经“猜到”这个标记会起作用，但可惜它没有。

$(document).ready(function() {
    $('#postalcode').focus(function() {
       $('label').val('');
    });
});

我无法更改 CSS 或 HTML，我确信 ateotd 会更容易。

这可能 w/jQuery 吗？

编辑：

感谢所有的答案，你很摇滚！我的查询措辞有误，我希望隐藏/清除标签的文本而不是整个标签。所以我已经“勾选”了有效的答案。

再次感谢。

Answer 1

.postal使用当前对象的父级

现场演示

$(document).ready(function() {
    $('#postalcode').focus(function() {
       $(this).prev('label').text('');
    });
});

Answer 2

标签没有值，它有文本内容，但为什么不在输入焦点时隐藏前一个标签：

$(function() {
    $('#postalcode').on('focus', function() {
       $(this).prev('label').hide();
    });
});

Answer 3

像这样的东西会将标签隐藏在焦点上，并在模糊时将其显示出来：

$(document).ready(function() {
    $('#postalcode').focus(function () {
        $(this).prev('label').hide();
    })
    .blur(function () {
        $(this).prev('label').show();
    });
});

http://jsfiddle.net/MhLsU/

如果你使用类，你可以使它更通用：

$('.field input').focus(function () {
    $(this).prev('label').hide();
})
.blur(function () {
    $(this).prev('label').show();
});

使用 HTML：

<p class="postal field">
    <label for="postalcode">post code</label>
    <input id="postalcode" name="postalcode" type="text" value="" />
</p>

http://jsfiddle.net/MhLsU/1/

现在它不仅适用于postalcode.

Answer 4

如果你想隐藏标签

$(document).ready(function() {
    $('#postalcode').focus(function(){$('label').hide();});
});