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中属性的后备解决方案

回答

相关问题