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

[doniv]

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

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

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

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

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

[melky]

переписать ток под 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>

[doniv]

'placeholder' in input

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

[doniv]

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

В общем у меня есть инпуты с айдишники 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' + 'как-то получить это значение после __') // И еще преобразовать полученную сумму строк в переменную.

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

[Kolyaj]

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

[doniv]

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

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

[melky]

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

[Kolyaj]

Спасибо за совет, конечно, но дизайн не предусматриват label.

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

[melky]

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

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

[ksa]

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

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