2011-01-13 3 views
0

Каков наиболее эффективный способ кодирования нижеследующих функций, которые предупреждают людей, если они пытаются представить пустую форму, а также ясные формы для их ввода?Есть ли более эффективный/оптимизированный способ написать этот кусок jQuery?

$("#newsletter-subscribe").focus(function() { 
     if(this.value=='Your email address'){ 
      this.value=''; 
     } 
    }); 

    $("#newsletter-subscribe").blur(function(){ 
     if(this.value==''){ 
      this.value='Your email address' 
     }; 
    }); 

    $("#subscribe").bind("submit", function(e){ 
     email = $("input#newsletter-subscribe").val(); 
    $("input#newsletter-subscribe").val(email); 
    if(jQuery.trim(email) == 'Your email address' || jQuery.trim(email) == '') { 
     alert('Please enter your email address to subscribe.'); 
     return false; 
    } 

    }); 

ответ

3

Возможно, вы захотите посмотреть плагин jQuery Watermark.

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

+0

Это идеально подходит для того, что я искал - спасибо! – simonyoung

0

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

1

Heres кусок кода я использую в этой ситуации, проверяет, является ли HTML5 заполнитель [http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute] Поддержка доступна, если он не обеспечивает его

  if(!('placeholder' in document.createElement('input'))){ 
       $('input[type="text"][placeholder] , textarea[placeholder]').each(function(){ 
        if('' != $(this).attr('placeholder')){ 
         if('' == $(this).val() || $(this).attr('placeholder') == $(this).val()){ 
          $(this).val($(this).attr('placeholder')).css('color','gray'); 
         } 
        } 
       }); 
       $('input[type="text"][placeholder], textarea[placeholder]').focus(function(){ 
        if($(this).attr('placeholder') == $(this).val()){ 
         $(this).val(''); 
         $(this).css('color','#272727'); 
        } 
       }).blur(function(){ 
        if('' == $(this).val()){ 
         $(this).css('color','gray').val($(this).attr('placeholder')); 
        } 
       }); 
      } 

так просто написать свои элементы, как: <input name="foo" type=text" placeholder="Placeholder text" />

Смежные вопросы