1

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

后备函数使用 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="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>
4

1 回答 1

2

您最好的选择可能是为您希望确保支持的功能找到polyfill 。

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

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

Modernizr 不会自动修复不受支持的功能，但会让您知道哪些功能可用并有条件地加载回退。

当我不通过以下 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。

于 2013-02-21T23:26:28.050 回答