Резервное решение для атрибутов в HTML5

Это шейма в HTML5. HTML5 имеет такие атрибуты, как: автофокус, местозаполнитель, дата и т. Д. Не все браузеры поддерживают их. Поэтому я хочу сделать некоторые резервные функции. Я не знаком с JS, JQuery, но я действительно хочу учиться :)Резервное решение для атрибутов в HTML5

Функция fallbackfuntions использует функцию elementSupportAttribute, чтобы проверить, не имеет ли элемент, может содержать определенный атрибут. Код отлично работает, когда я не запускаю методы через этот if-statement: 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

лучше всего, вероятно, найти polyfill (ы) для функций, которые вы хотите, чтобы убедиться, поддерживаются .

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

Кроме того, я попытался использовать платформу Modernizr, но не смог это сделать .

Modernizr не автоматически исправить неподдерживаемые функции, но будет вам знать, какие функции доступны и conditionally load откаты.

код прекрасно работает, когда я не запускать методы через это заявление, если- : если ((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

также многие из этих атрибутов уже изящно деградируют .... Я знаю, что placeholder делает, как и большинство новых типов ввода. – albert

@albert - совершенно. Неясно, пытается ли OP создать действительную схему и/или фактически гарантировать, что функции работают. –

<сценарий SRC = "JS/Modernizr-1.0.min.js"> \t \t \t \t \t \t $ (документ) .ready (функция() { \t \t \t \t если (Modernizr.input.autofocus!) { \t \t \t \t \t $ ("# авто") фокус();. \t \t \t \t} \t \t \t \t если (! Modernizr.inputtypes.дата) { \t \t \t \t \t $ ("# datepicker"). datepicker(); \t \t \t \t} \t \t \t}); Спасибо! Но это тоже не сработает. По крайней мере, не в Firefox 3. –

Резервное решение для атрибутов в HTML5

ответ

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