針對不支持的HTML5元素和屬性的JavaScript解決方法

Question

我使用Modernizr來檢測瀏覽器中不受支持的HTML5元素和屬性。如果不支持元素/屬性，我喜歡用jQuery寫一個快速解決方法。

目前，我在輸入元素的「required」屬性中徘徊。我的想法是「檢測」相關的表單元素，並鉤住表單的jQuery .submit()事件。 但是怎麼做呢？

要深入瞭解自己在這裏是一個示例代碼，我怎麼固定的「佔位符」屬性的輸入元素：

if(Modernizr.input.placeholder == false) { 
    alert('input placeholder not exists, perform a workaround...'); 
    $('[placeholder]').each(function() { 
     var input = $(this); 
     var placeholder = input.attr('placeholder'); 
     input.bind('focus', function() { 
      if(this.value == placeholder) { 
       this.value = ''; 
       $(this).removeClass('mzr-no-placeholder'); 
      } 
     }).bind('blur', function() { 
      if(this.value == '') { 
       this.value = placeholder; 
       $(this).addClass('mzr-no-placeholder'); 
      } 
     }); 
     if(!this.value.length) { 
      this.value = placeholder; 
      $(this).addClass('mzr-no-placeholder'); 
     } 
    }); 
} 
else { 
    alert('input placeholder exists.'); 
} 

下面是解

感謝greut。

if(Modernizr.input.required == false) { 
    alert('Tag input required not exists, perform a workaround...'); 
    $('form').submit(function() { 
     var requirementsOK = true; 
     $('[required]', this).each(function() { 
      if(!this.value.length) { 
       $(this).addClass('mzr-no-required'); 
       requirementsOK = false; 
      } 
      else { 
       $(this).removeClass('mzr-no-required'); 
      } 
     }); 
     return requirementsOK; 
    }); 
} 
else { 
    alert('Tag input required exists.'); 
} 

Answer 1

這裏就如何啓動一個提示：

if (Modernizer.input.required === false) { 
    $('form').submit(function() { 
     $('[required]', this).each(function() { 
       if (!$(this).val()) { 
        alert('derp!'); 
        return false; 
       } 
     } 
    } 
}