Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Оптимизация очистки инпутов. (https://javascript.ru/forum/jquery/18559-optimizaciya-ochistki-inputov.html)

doniv 08.07.2011 11:15

Цитата:

Сообщение от Kolyaj (Сообщение 112382)
Причём тут дизайн? Я про реализацию, а не про внешний вид. Дизайн никакие теги не предусматривает.

Да, прошу прощения. Я действительно даже не думал о таком варианте, потому и представил все по своему.

Спасибо.

doniv 08.07.2011 11:46

Все получилось. Кроме одного, я вспомнил, что и с техареа нужно поступать подобным образом. Немного покумекал и вот финальный код:

<form method="post" action="contactform.php"  id="contact-form">
                <ul class="contact-form__list">
                    <li>
                        <label class="contact-form__label" for="contact-form__subject">Тема</label>
                        <input class="contact-form__list__item" type="text" name="name" value="Тема" id="contact-form__subject" />
                    </li>
                    <li>
                        <label class="contact-form__label" for="contact-form__email">Ваша электропочта</label>
                        <input class="contact-form__list__item" type="text" name="email" value="Ваша электропочта" id="contact-form__email" />
                    </li>
                    <li>
                        <label class="contact-form__label" for="contact-form__message">Текст сообщения</label>
                        <textarea class="contact-form__list__item-text" rows="5" name="message" id="contact-form__message">Текст сообщения</textarea>
                    </li>
                    <li>
                        <input type="submit" id="contact-form__submit" class="contact-form__list__item-button" value="Отправить" />
                    </li>
                </ul>
            </form>


//Очищаем и заполняем элементы формы по клику

    function textForm(inputId){
        if (inputId.val() == inputId.parent().find('label').html()) {  //Если в инпуте значение по умолчанию, то очищаем
            inputId.attr({value: ''});
            inputId.addClass('active-input');
        } else {
            if (inputId.val() == '') { //Если инпут пустой, то заполняем его значение по умолчанию
                inputId.attr({value: inputId.parent().find('label').html()});
                inputId.removeClass('active-input');
            }
        }
    }

    //Применяем функцию на нужные поля

    $('.contact-form__list').find('label + *').live('click', function() {textForm($(this));});
    $('.contact-form__list').find('label + *').focusout(function(){textForm($(this));});



Большое спасибо всем участникам.

doniv 08.07.2011 17:01

Появился дополнительный вопрос.

Когда я вызываю функцию, через фокус

$('li').find('label + *').focus(function() {clearField($(this));});


а не через клик

$('li').find('label + *').live('click', function() {clearField($(this));});


То она начинает срабатывать бесконечно. А мне нужно вызывать ее именно через фокус, чтобы весь код срабатывал при переключения с помощью таба.

В чем тут проблема и как ее решить?

P.S.clearField это таже самая textForm из предыдущего сообщения.


Часовой пояс GMT +3, время: 11:00.