AdeL1ne
Новичок
Здравствуйте, имеется форма регистрации:
в которой поверх input'ов отображается текст, описывающий значение данного поля. Естественно при фокусе на этих полях, текст должен исчезать, а при снятии фокуса, появляться вновь. Для этого был написан скрипт jquery:
Проверялось все это в браузере Firefox и там работало отлично, однако при проверке этого же скрипта на Safari и Chrome выявился один косяк: при загрузке страницы, текстовые надписи поверх input'ов появляются далеко не всегда. Вернее сказать при первом вводе адреса, эти поля практически всегда пустые, а после загрузки при нажатии f5 то появляются, то нет. Зато всегда исправно работают события focus и blur. В чем может быть причина такой плавающей ошибки?
PHP:
label.abstitle { position: relative; }
label.abstitle:hover {
cursor: text;
}
label.abstitle span {
position: absolute; top: 3px; left: 4px; bottom: 0; right: 0;
display: none;
color: #858585;
font-size: 13px;
font-family: verdana;
}
PHP:
<form id="reg_form" action="blocks/registration.php" method="post">
<label class="abstitle"><span>Имя пользователя</span><input id="user" type="text" maxlength="30" name="user" value="" /></label><span id="error_user" class="error_message"></span><br />
<label class="abstitle"><span>Адрес электронной почты</span><input id="email" type="text" maxlength="30" name="email" value="" /></label><span id="error_email" class="error_message"></span><br />
<label class="abstitle"><span>Пароль</span><input id="pass_first" type="password" maxlength="30" name="pass_first" /></label><span id="error_pass" class="error_message"></span><br />
<label class="abstitle"><span>Пароль повторно</span><input id="pass_second" type="password" maxlength="30" name="pass_second" /></label><span id="error_pass2" class="error_message"></span><br />
<input id="button_reg" type="submit" name="submit" value="Зарегестрироваться" style="margin-top: 7px;" disabled="disabled" />
</form>
PHP:
var hide = function() //focus
{
$('span', $(this).closest('label')).hide();
};
var show = function()
{
if (!$(this).attr('value').length)
{
$('span', $(this).closest('label')).show();
}
};
$('label.abstitle input').each(show);
$('label.abstitle input').focus(hide);
$('label.abstitle input').blur(show);
