0

我正在使用 js+html 构建表单，但遇到了问题。在我的表单的一部分中，用户应该能够单击文本字段并从日历中选择日期和时间（MAM3 的anytime.js），并且由于我的表单（部分代码）是这样构建的：

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 控制的，所以anyny.js不会将其视为html 名称字段。

SN2：我的 js 中的 onfocus='showMessage()' 是在用户单击文本字段时显示一条消息。

我如何使它工作？

4

1 回答 1

1

几个问题：

首先，您有多个元素的id值Date和Time。id值在文档中必须是唯一的。我希望脚本没有得到它期望的元素并且无法初始化。AnyTime的文档似乎建议它使用您提供的第一个参数AnyTime.widget作为 anid并期望获得一个输入字段。在您的情况下，它通常不会在大多数浏览器上，因为当面对具有重复ids 的无效结构时，大多数浏览器会在您请求带有 that 的“the”元素时返回第一个id，在您的情况下是 aspan而不是一个输入字段。

你的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 回答