Изменить значение ввода/текста на размытие/фокус

Question

У меня другая проблема. я думаю, это просто глупая ошибка, но я просто не понимаю. так что, возможно, вы можете мне помочь. У меня есть несколько полей ввода текста со значением «по умолчанию». onClick в поле значение исчезает, и пользователь может вставить данные. при размытии значение «default» должно появиться снова, если поле пустое. Это срабатывает, только если я блистал к полю размытия. если я напишу что-нибудь в поле, размытия и снова сфокусирую его и удаляю весь текст и размытие, он больше не работает.

JQuery-код выглядит следующим образом:

Вот скрипка моего кода: http://jsfiddle.net/xQ7jt/ это мой фокус-функции. остальная часть кода находится в скрипку

$(document).on('focus', '.insert_adresse', function() { 
      // $(this).css('background-color', 'yellow'); 
      $(this).attr('value', ''); 
     }); 

Answer 1

http://jsfiddle.net/wrxsti85/xQ7jt/3/

Попробуйте использовать разметку для этого вместо этого. Это также совместимая с браузером альтернатива. placeholder="Your text here..." сэкономит вам время.

<input type="text" id="input_text_hhnr" class="insert_adresse" name="hhnr" placeholder="Hausnummer" /> 

Answer 2

Вы можете добавить Глобальную переменную для хранения значения по умолчанию для вас, так что сначала вы Foreach все входные и хранить входной идентификатор в качестве глобального ключа, а затем в размытии, если вход пустой, вы заменяете значение на глобальное значение (значение по умолчанию).

Рабочий пример: fiddle

var global = []; 

$(document).ready(function(){ 
    $('input').each(function(k,v){ 
    global[$(v).attr('id')] = $(v).attr('value'); // insert the default value into the Global key with the input ID attr 
    }); 
}); 

$(document).on('focus', '.insert_adresse', function() { 
     // $(this).css('background-color', 'yellow'); 
     $(this).attr('value', ''); 
    }); 

$(document).on('blur', '.insert_adresse', function() { 
     // $(this).css('background-color', 'white'); 
     var value=$(this).val(); 
     // alert(value); 
     var id=$(this).attr('id'); 
     if (value == '') { 
      $(this).val(global[$(this).attr('id')]); // get the value with the input id attr 
     } 
     // alert(value); 
     $(this).attr('value', value); 
    }); 

Answer 3

Я обновил скрипку. http://jsfiddle.net/xQ7jt/2/

Проверьте, подходит ли это вам.

$(document).on('focus', '.insert_adresse', function() { 
     // $(this).css('background-color', 'yellow'); 
     $(this).val(''); 
    }); 

$(document).on('blur', '.insert_adresse', function() { 
     // $(this).css('background-color', 'white'); 
     var value=$(this).val(); 
     var id=$(this).attr('id'); 
     if (value.length == 0) { 
     // alert('empty'); 
//   alert(id); 
      if (id=='input_text_strasse') { 
       value='Straße'; 
      } else { 
       if (id=='input_text_hhnr') { 
        value='Hausnummer'; 
       } else { 
        if (id=='input_text_hhnrzusatz') { 
         value='Hausnummerzusatz'; 
        } else { 
         if (id=='input_text_plz') { 
          value='Postleitzahl'; 
         } else { 
          if (id=='input_text_ort') { 
           value='Gemeinde'; 
          } else { 
           // alert('here we go'); 
          } 
         } 
        } 
       } 
      } 
      $(this).val(value); 
     } 
     // alert(value); 

    }); 

Answer 4

Вот пример не с помощью меток-заполнителей (Нет JS): http://jsfiddle.net/xQ7jt/4/

Вот еще один пример, с гораздо чище и более простые JS: http://jsfiddle.net/xQ7jt/5/

$(document).on('focus', '.insert_adresse', function() { 
    $(this).val($(this).val() === $(this).data('default') ? '' : $(this).val()); 
}); 

$(document).on('blur', '.insert_adresse', function() { 
    $(this).val($(this).val() || $(this).data('default')); 
}); 

$(function() { 
    $('.insert_adresse[data-default]').each(function() { 
     $(this).val($(this).data('default')); 
    }); 
});