我正在使用js+html构建一个表单,但我遇到了一个问题。我的表单中有一部分,用户应该能够单击文本字段并从日历(随时.js通过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:onfocus='showMessage()' 在我的 js 中是在用户单击文本字段时显示一条消息。
我如何让它工作?
几个问题:
首先,您有多个元素具有id
值 Date
和 Time
。 id
值在文档中必须是唯一的。我希望脚本没有获得它期望的元素并且无法初始化。AnyTime 的文档似乎建议它使用您AnyTime.widget
的第一个参数作为id
,并期望获得输入字段。在您的情况下,它通常不会在大多数浏览器上,因为当面对具有重复id
的无效结构时,大多数浏览器会在您请求带有该id
的"the"元素时返回第一个,在您的情况下,这是一个span
而不是输入字段。
您的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中也无效。因此,如果您尝试在CSS样式的选择器中使用该id
(例如,使用jQuery),则可能会遇到麻烦。