2013-03-11 2 views
1

У меня есть этот вид клиента (закодированный другими), что я не могу изменить -размытость/скрыть ярлык на фокус

<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 были бы проще.

Возможно ли это с помощью jQuery?

EDIT:

Спасибо за ответы на все вопросы, вы много рок! Я неправильно сформулировал свой запрос, я хотел, чтобы текст ярлыка был скрыт/очищен не всей меткой. Поэтому я «пометил» ответ, который работает.

Еще раз спасибо.

ответ

1

Использование родительского .postal текущего объекта

Live Demo

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

я не объяснить это хорошо, и это то, что нужно, для текста лейбла быть удалены не ярлык, чтобы быть на самом деле скрыты. –

1

Метка does'nt имеют значение, то есть содержание текста, но почему бы не просто скрыть предыдущую метку, когда вход сфокусированное:

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

Что-то вроде этого скроет ярлык в центре внимания и покажет его bac к на размытость:

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

0

, если вы хотите, чтобы скрыть метку

$(document).ready(function() { 
    $('#postalcode').focus(function(){$('label').hide();}); 
}); 
Смежные вопросы