0

js + htmlを使用してフォームを作成していますが、問題が発生しました。ユーザーがテキストフィールドをクリックしてカレンダー（ anytime.js by MAM3 ）から日付と時刻を選択できるようにするフォームの一部があります。フォーム（部分コード）は次のように作成されているため、次のようになります。

third_list = "<table class='table'>";
if (radio_array[genIndex] == reserve) {
    third_list += "<tr><td id='Date:'><label><span id='Date'>Date:</span><input type='text' id='Date' name='_date' size='20' onfocus='showMessage()'/></label></td>";
    third_list += "<td id='Time:'><label><span id='Time'>Time:</span><input type='text' id='Time' name='_time' size='20' /></label></td>";
    document.getElementById("third").innerHTML = third_list;
    l3_value = "";
    return;
}

そしてこれをhtmlに置くことによって：

    <script type="text/javascript">
    AnyTime.widget
        ( "Date",
            { format: "%m/%d/%Z" }
        );
    AnyTime.widget
        ( "Time",
            { format: "%h:%i:%p" }
        );
    </script>

カレンダーはポップアップしません。

補足：必要なjs＆cssファイルをすべて含めて、jsとは別のテキストフィールドで機能するかどうかを確認しようとしましたが、機能します。それが機能しない理由は、それがjsによって制御されているためだと思います。そのため、anytime.jsはそれをhtml名フィールドとして認識しません。

SN2：私のjsのonfocus ='showMessage（）'は、ユーザーがテキストフィールドをクリックしたときにメッセージを表示することです。

どうすればそれを機能させることができますか？

4

1 に答える 1

1

いくつかの問題：

idまず、値Dateと。を持つ複数の要素がありますTime。id値はドキュメント内で一意である必要があります。スクリプトが期待する要素を取得しておらず、初期化に失敗していると思います。AnyTimeのドキュメントは、指定した最初の引数をAnyTime.widgetとして使用しid、入力フィールドを取得することを期待していることを示唆しているようです。あなたの場合、それは通常ほとんどのブラウザでは起こりません。なぜなら、重複したsを特徴とする無効な構造に直面した場合、ほとんどのブラウザは、それidを含む「the」要素を要求すると最初の構造を返すからです。入力フィールド。idspan

あなたのDate要素：

<span id='Date'>Date:</span><input type='text' id='Date' ... />
<!--      ^--- one                                 ^--- two -->

これTimeは同じ種類の問題です。

それとは別に、を呼び出すときに要素が存在することを確認する必要があると思いますAnyTime.widget。それを呼び出すタグがどこにあるかはわかりませんが、行を実行した後scriptにこの呼び出しを行う必要があります

document.getElementById("third").innerHTML = third_list;

...問題の要素がDOMに存在するようにします。たとえば、次のようになります。

third_list = "<table class='table'>";
if (radio_array[genIndex] == reserve) {
    third_list += "<tr><td id='Date:'><label><span id='Date'>Date:</span><input type='text' id='Date' name='_date' size='20' onfocus='showMessage()'/></label></td>";
    third_list += "<td id='Time:'><label><span id='Time'>Time:</span><input type='text' id='Time' name='_time' size='20' /></label></td>";
    document.getElementById("third").innerHTML = third_list;
    l3_value = "";
    setUpWidgets();
    return;
}

// ...elsewhere in the same scope or a containing scope:
function setUpWidgets() {
    AnyTime.widget
        ( "Date",
            { format: "%m/%d/%Z" }
        );
    AnyTime.widget
        ( "Time",
            { format: "%h:%i:%p" }
        );
}

これにより、要素が存在するときに呼び出す関数が作成されます。

補足：id次のようなものもあります：

 <td id='Date:'>

これはHTML5では有効idですが、HTML4では無効であり、CSSでは無効です。したがってid、CSSスタイルのセレクター（たとえば、jQueryを使用）でそれを使用しようとすると、おそらく問題が発生します。

于 2012-06-20T18:03:24.850 に答える