模糊/隐藏焦点上的标签

时间:2013-03-11 18:53:27

标签: jquery forms focus hide blur

我有这个客户形式(由他人编码)我无法改变 -

<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吗?

编辑:

感谢所有的答案,你摇摇晃晃!我误解了我的查询我希望隐藏/清除标签的文本而不是整个标签。所以我已经'勾选'了有效的答案。

再次感谢。

4 个答案:

答案 0 :(得分:1)

使用当前对象的父.postal

<强> Live Demo

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

答案 1 :(得分:1)

标签没有值,它有文本内容,但为什么不在输入聚焦时隐藏上一个标签:

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

答案 2 :(得分:0)

这样的东西会将标签隐藏在焦点上,并在模糊时显示回来:

$(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

答案 3 :(得分:0)

如果你想隐藏标签

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