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

<强> Live Demo

$(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();});
});

模糊/隐藏焦点上的标签

4 个答案: