Я недавно создал новую форму для своего сайта, с ярлыками, встроенными в сами поля формы - например, "Заголовок", когда вы задаете вопрос на этом сайте.
Вы можете увидеть его здесь: http://utilitiessavings.co.uk/business-energy/business-electricity/ (прокрутите вниз)
У меня изначально была метка, исчезающая, как только поле сфокусировалось, но я решил, что будет лучше оставить ее, пока пользователь не начнет печатать, потому что в противном случае они могли бызабудь, какое поле на самом деле для
Единственная проблема в том, что каретка в тексте метки, и не ясно, что она исчезнет, когда ты начнешь печатать.
Вот мой код(да, взломан на куски):
var keypressed = false;
// for each input field with a title
$('input[title], textarea[title]').each(function() {
// if it has no value
if($(this).val() === '' || $(this).attr('title'))
{
// add the labeled class
$(this).addClass('labeled');
// set the value to the title
$(this).val($(this).attr('title'));
}
// when focused
$(this).focus(function()
{
// select the whole field
$(this).select();
// if the value is the label/title
if($(this).val() === $(this).attr('title'))
{
// wait for keypress
$(this).keypress(function() {
// if first key pressed
if(keypressed == false)
{
// clear the field and remove labeled class
$(this).removeClass('labeled').val('');
// set keypressed to true so next keypress doesn't clear field again
keypressed = true;
}
});
}
}).click(function()
{
// select the whole field
$(this).select();
});
// when undocused
$(this).blur(function() {
// if blank
if($(this).val() === '') {
// add labeled class and title/label
$(this).addClass('labeled').val($(this).attr('title'));
}
else
{
if($(this).val() === $(this).attr('title'))
{
$(this).addClass('labeled');
}
}
// set keypressed to false for next field
keypressed = false;
});
});
Вы заметите, что я поставил select () onfocus и onclick, но это все еще не всегда работает.Это странно.Кто-нибудь, пожалуйста, посоветуйте, если это вообще нужно, или я должен сделать так, как stackoverflow.com задает вопрос:
Любая помощь, высоко ценимая, и извините за бессвязные, но я всегда чувствую, что лучше дать больше информации, которой недостаточно:)
Спасибо всем,
Дрю