サポートされていないHTML5要素と属性のJavaScript回避策

Question

Modernizrを使用して、ブラウザ内でサポートされていないHTML5要素と属性を検出しています。要素/属性がサポートされていない場合、私はjQueryですばやく回避策を書くのが好きです。

現時点では、私は入力要素で「必須」属性を抱えています。私の考えは、関連するフォーム要素を「検出」し、フォームの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; 
       } 
     } 
    } 
}