HTML5中屬性的後備解決方案

這是HTML5中的一種方式。 HTML5具有以下屬性：自動對焦，佔位符，日期等。並非所有瀏覽器都支持這些屬性。因此我想製作一些後備功能。我並不熟悉JS，JQuery，但我真的很想學習:)HTML5中屬性的後備解決方案

fallbackfuntions使用elementSupportAttribute-函數來檢查是否一個元素可以容納一個特定的屬性。當我不通過這個if語句運行這些方法時，代碼工作的很好：if（！（elementSupportsAttribute（element，attribute）），但是當我這樣做時，代碼根本不能運行，任何人都可以看到這個問題嗎？

而且，我試圖用Modernizr的框架，但沒有管理，要麼。

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset= "UTF-8" /> 
     <!--[if lt IE 9]> 
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 
     <link type="text/css" rel="stylesheet" href="Skjema.css"/> 
     <title>Bestilling av busstur</title> 

     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> 
     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
     <link rel="stylesheet" href="/resources/demos/style.css" /> 

     <script type="text/javascript"> 

      $(document).ready(function() { 
       if (!(elementSupportsAttribute('input','autofocus')) { 
        $("#auto").focus(); 
       } 
       if(!(elementSupportsAttribute('input','date')){ 
        $("#datepicker").datepicker(); 
       } 
      }); 

      function elementSupportsAttribute(element,attribute){ 
       var test = document.createElement(element); 
       if (attribute in test){ 
        return true; 
       } 
       else { 
        return false; 
       } 
      } 


      function finnAlleRequired(){ 
       if (!(elementSupportsAttribute('input', 'required')){ 
        var alle = document.getElementsByClassName("requiredInput"); 
        var print = ""; 
        for (i=0;i<alle.length; i++){ 
         var temp = alle[i]; 
         if (temp.value==""){ 
          print += temp.name + " "; 
          temp.classList.add("error"); 

         } 
         else { 
          temp.classList.remove("error"); 
         } 
        } 

       } 
       if(!(elementSupportsAttribute('input','number')){ 
        numberCheck(); 
       } 
      } 

      function numberCheck() { 
       var number = document.getElementById("number").value; 
       var min = 1; 
       var max = 10; 
       if(number < 1 || number > 10){ 
        alert("Antallet personer du kan bestille til er mellom 1 og 10"); 
       } 
      } 


     </script> 
    </head> 
    <body> 
     <header> 
      <h1> 
       Bestilling av busstur 
      </h1> 
     </header> 
     <article> 
      Vennligst fyll ut skjema under for å bestille busstur. Du kan bestille plasser for max 10 personer. Felter markert med <label class="required">*</label> er obligatoriske. 
     </article> 
     <form> 
      <p> 
       <label for="name">Navn:</label><br/> 
       <input type="text"  name="name"  placeholder="Fullt navn" id="auto" autofocus> 
      </p> 
      <p> 
       <label class="required">*</label> 
       <label for="email">E-post:</label><br/> 
       <input type="email"  name="email" placeholder="[email protected]" class="requiredInput" required> 
      </p> 
      <p> 
       <label for="phone">Telefon:</label><br/> 
       <input type="tel"  name="phone" placeholder="11223344"> </p> 
      <p> 
       <label class="required">*</label> 
       <label for="date">Dato:</label><br/> 
       <input type="date"  name="date"  id="datepicker" class="requiredInput"required> 
      </p> 
      <p> 
       <label class="required">*</label> 
       <label for="numberPersons">Antall:</label><br/> 
       <input type="number" name="numberPersons" min="1" max="10" value="2" class="requiredInput" id="number" required> 
      </p> 
      <p> 
       <label for="other">Hvor fant du informasjon om oss?</label><br/> 
       <input type="text"  name="other" placeholder="Facebook, Twitter, venner"> 
      </p> 
      <p> 
       <input type="submit" value="Registrer" onclick="finnAlleRequired()"> 
     </form> 
    </body> 
</html>

來源

2013-02-21 Maiken Beate Fjellanger

您最好的選擇可能是找填充工具（S）您要確保功能的支持。

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

此外，我試圖使用Modernizr框架，但沒有管理該要麼。

的Modernizr不會自動修復不支持的功能，但將讓你知道哪些功能和conditionally load回退。

代碼工作正常，當我不跑通過本 if語句的方法：如果（（elementSupportsAttribute（元素，屬性）），但當我這樣做，該代碼不能運行在所有。

我用這個片段和一些HTML 5表單屬性跑了快速測試

function elementSupportsAttribute(element,attribute){ 
    var test = document.createElement(element); 
    if (attribute in test){ 
     return true; 
    } 
    else { 
     return false; 
    } 
} 

alert(elementSupportsAttribute("input", "required"));

功能確實出現在Chrome 24的工作：。http://jsfiddle.net/eT5Ac/

但是，使用Modernizr的一個已建立的測試，尤其是Input Types Test會好得多。

來源

2013-02-21 23:26:28

許多這些屬性已經優雅地降級......我知道佔位符的確如同大多數新的輸入類型一樣。 – albert 2013-02-21 23:29:45

@albert - 絕對。目前尚不清楚OP是在嘗試創建一個有效的模式和/或實際保證這些功能的工作。 – 2013-02-21 23:30:41

\t \t \t \t \t \t $（文件）。就緒（函數（）{ \t \t \t \t如果（Modernizr.input.autofocus！）{ \t \t \t \t \t $（「＃汽車」）專注（）; \t \t \t \t} \t \t \t \t if（！Modernizr.inputtypes。日期）{ \t \t \t \t \t $（「＃datepicker」）。datepicker（）; \t \t \t \t} \t \t \t}）; 謝謝！但是這也行不通。至少不會在Firefox 3. – 2013-02-21 23:53:48

HTML5中屬性的後備解決方案

回答

相關問題