Оптимизация очистки инпутов.
 

Здравствуйте. Теоретически часть задачи сводится к следующему.

Если инпут заполнен стандартным значением, то очищать при фокусе, если пустой, то заполнять стандартным значением при потере фокуса.

Тут все просто:

var startSubject = $('#contact-form__subject').val();
    var startEmail = $('#contact-form__email').val();
    var startMessage = $('#contact-form__message').val();

    $('#contact-form__subject').focus(function() {
        if ($(this).val() == startSubject) {
            $(this).attr({value: ''});
            $(this).addClass('active-input');
        }
     });

    $('#contact-form__subject').focusout(function(){
        if ($(this).val() == '') {
            $(this).attr({value: startSubject});
            $(this).removeClass('active-input');
        }
    });

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

переписать ток под jquery.. кода будет меньше :)

заметил фигню у IE

'placeholder' in input

ошибок не выдает,а на этом месте спотыкается.. странно...

но стоило поставить это :

'placeholder' in document.createElement('input');

как он всё проглотил :) и работает ,как задумывалось

код снизу проверял в ie8

<input id="a" value="" placeholder="Введите свой email...">

<script>
// наше текстовое поле
var input = document.getElementById("a");

// поддержка placeholder
var supported =  'placeholder' in document.createElement('input');

if(!supported) {

// значение по-умолчанию
var defvalue = input.getAttribute('placeholder');

 //или аттач от jquery
 input.onfocus = input.onblur = function(e){
 
   if (!e) e = window.event;

   if( e.type === 'focus' ){

         // если поле заполнено знач. по умолч., то очищаем 
         if( input.value ===  defvalue ) input.value='';    

   } else {
        // если поле пустое, заполняем знач по умолч
        if( input.value.length === 0 ) input.value = defvalue;
   }
   return;
 }

// и заполняем значением по умолчанию, если надо
input.onfocus( {type:'blur'} )
}
</script>

Разбирая код совсем запутался. У инпутов же у всех айдишники и классы разные. Под такое можно адаптировать ваш код?

У меня есть свой логический вариант, но как его реализовать я не знаю и возможно ли это вообще. Если кто подскажет, что к чему, то буду очень рад.

В общем у меня есть инпуты с айдишники contact-form__subject, contact-form__email и contact-form__message.

У каждого из этих инпутов я беру value и вкладываю их в переменную, соответственно startSubject, startEmail, startMessage (это я делаю в любом случае, для еще кое-каких нужд).

В результате для одного такого инпута получается код:

$('#contact-form__subject').focus(function() {
        if ($(this).val() == startSubject) {
            $(this).attr({value: ''});
            $(this).addClass('active-input');
        }
     });

Таким образом, чтобы сравнивать value старых и новых элементов мне нужно заменять только $('#contact-form__subject') на нужный мне айдишник инпута и все будет хорошо, кроме одного:

if ($(this).val() == startSubject)

Мне еще нужно преобразовать переменную, в данном случае нужно взять start от название переменной и слово после __ у каждого айдишника.

Получается, что-то вроде:

if ($(this).val() == 'start' + 'как-то получить это значение после __') // И еще преобразовать полученную сумму строк в переменную.

Потом из этого сделать функцию в которую просто передавать айдишник поля по которому совершен клик.

Не надо сравнивать value. Нужно label с нужной надписью спозиционировать над инпутом и в нужные моменты времени его показывать/скрывать.

Спасибо за совет, конечно, но дизайн не предусматриват label.
Задачу пока решил написанием функции, в которую просто кидаю переменные. Получилось конечно все равно к каждому инпуту свой запрос, но в одну строчку.

разберись в том , что я тебе написал.разве это не подошло?

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

он решил, наверное, что label будет нависать сверху ( выше ) инпута, а не над ним,заменяя плейсхолдер

doniv, если рассматривать только новые браузеры - можно использовать возможности хтмл5

<input type='text' placeholder='Значение по умолчанию' />

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

Спасибо.

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

<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));});

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

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

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

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

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

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

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

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

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