Question

这是HTML5中的一个shema。 HTML5具有以下属性：自动对焦，占位符，日期等。并非所有浏览器都支持这些。因此我想做一些后备功能。我不熟悉JS，JQuery，但我真的想学习:)

fallbackfuntions使用elementSupportAttribute-function检查元素是否可以保存特定属性。当我不通过这个if语句运行方法时，代码工作正常：if（！（elementSupportsAttribute（element，attribute）），但是当我这样做时，代码根本不运行。任何人都可以看到问题吗？ / p>

另外，我尝试使用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="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>

Answer 1

您最好的选择可能是找到 polyfill（s），以了解您希望确保支持的功能。

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

另外，我尝试使用Modernizr框架，但没有管理它任

Modernizr不会自动修复不支持的功能，但会让您了解可用的功能和conditionally load后备广告。

当我不通过此方法运行时，代码工作正常 if语句：if（！（elementSupportsAttribute（element，attribute）），但是当我这样做时，代码根本不会运行。

我使用此代码段和几个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会更好。

HTML5中属性的后备解决方案

1 个答案: