Fallback solution for attributes in HTML5

StackOverflow https://stackoverflow.com/questions/15014124

  •  10-03-2022
  •  | 
  •  

سؤال

This is a shema in HTML5. HTML5 has attributes like: autofocus, placeholder, date etc. Not all browsers supports these. Therefore I want to make some fallback functions. I'm not that familiar with JS, JQuery, but i really want to learn :)

The fallbackfuntions uses the elementSupportAttribute-function to check wether or not an element can hold a specific attribute. The code works fine when I don't run the methods through this if-statement: if (!(elementSupportsAttribute(element, attribute)), but when I do, the code does not run at all. Can anybody see the problem?

Also, I tried to use the Modernizr-framework, but did not manage that either.

<!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="nordmann@norge.no" 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>
هل كانت مفيدة؟

المحلول

Your best bet is probably to find polyfill(s) for the features you wish to ensure are supported.

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

Also, I tried to use the Modernizr-framework, but did not manage that either.

Modernizr doesn't automatically fix unsupported features, but will let you know what features are available and conditionally load fallbacks.

The code works fine when I don't run the methods through this if-statement: if (!(elementSupportsAttribute(element, attribute)), but when I do, the code does not run at all.

I ran a quick test using this snippet and several HTML 5 form attributes.

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

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

The function does appear to work in Chrome 24: http://jsfiddle.net/eT5Ac/.

However, it would be much better to use one of Modernizr's established tests, specifically the Input Types Test.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top