1

これは HTML5 のスキーマです。HTML5 には、オートフォーカス、プレースホルダー、日付などの属性があります。すべてのブラウザーがこれらをサポートしているわけではありません。したがって、いくつかのフォールバック関数を作成したいと思います。私はJS、JQueryに精通していませんが、本当に学びたいです:)

fallbackfunctions は elementSupportAttribute-function を使用して、要素が特定の属性を保持できるかどうかをチェックします。この 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

最善の策は、サポートされていることを確認したい機能のポリフィルを見つけることです。

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

また、Modernizr-frameworkを使おうとしましたが、それも管理できませんでした。

Modernizrは、サポートされていない機能を自動的に修正しませんが、使用可能な機能を通知し、条件付きでフォールバックをロードします。

このif-statement：if（！（elementSupportsAttribute（element、attribute）））を介してメソッドを実行しない場合、コードは正常に機能しますが、実行すると、コードはまったく実行されません。

このスニペットといくつかのHTML5フォーム属性を使用して簡単なテストを実行しました。

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

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

この関数はChrome24で機能しているようです：http：//jsfiddle.net/eT5Ac/。

ただし、Modernizrの確立されたテストの1つ、具体的には入力タイプテストを使用する方がはるかに優れています。

于 2013-02-21T23:26:28.050 に答える