我应该如何使用JavaScript逐步增强此内容？

这个问题的背景是，我正在做一个计算项目，其中包括一些用于输入的下拉框，以及一个用户可以输入日期的文本输入

我使用YUI来增强表单，因此日历输入使用，下拉列表转换为输入的水平列表，用户只需单击一次即可选择任何输入，而不是使用下拉框单击两次（希望有意义，不确定如何清楚解释）

问题是，在我的项目的设计部分，我声明我将遵循渐进增强原则。然而，我正在努力确保没有JavaScript的用户能够查看所述页面上的下拉框/文本输入

这并不是因为我不一定知道怎么做，而是我尝试过的两种方法似乎并不令人满意

方法1-我尝试使用YUI隐藏文本框和下拉列表，这似乎是理想的解决方案，但是在加载页面（尤其是第一次）时，文本框和下拉列表至少有一秒钟是可见的，存在明显的延迟。我在body标签的末尾加入了这个脚本，有没有办法让我在加载YUI时运行它？那会有帮助吗

方法2-使用noscript标记。然而，我不愿意这样做，因为这将是一个简单的解决方案，我读过关于noscript标记的各种不好的东西

---

有没有办法让方法一起作用？或者我还没有遇到更好的方法来实现这一点吗？

我不完全确定在没有JavaScript的情况下要显示/隐藏什么，但是可以使用CSS来显示和隐藏，只要您能够以某种方式选择该元素。例如，基于以下加价：

<form action="#" method="post">
    <fieldset>
        <label for="dateStart">Start date</label>
        <input type="text" name="dateStart" id="dateStart" />
    </fieldset>
</form>

（这显示了点击

标签后的
dateStart
输入（它的样式类似于
a
元素，与用户界面期望一致）。显然，没有JavaScript，YUI日历小部件无法显示（因为它是与JS一起添加/使用的），但基本日期输入字段将在那里，并且可以访问


编辑了，以下测试（使用Chromium 17/Ubuntu11.04）表明
输入在页面上可见之前无法接收
：focus
，以下修改的CSS似乎解决了该问题：

label + input {
    display: none;
}
label:hover + input, /* <- added this selector */
label + input:focus {
    display: inline-block;
}​

标签+输入{
显示：无；
}
label:hover+input，/*通常，显示/隐藏元素的脚本速度非常快。我能想到的第一个脚本速度慢的唯一原因是，该脚本在元素渲染后运行了很长时间。在执行隐藏或其他延迟之前，可能会运行一些昂贵的脚本

我认为解决方案是使隐藏脚本成为代码的第一部分，如果需要，在呈现下拉列表后立即在脚本块中运行。
Yui具有domready事件（在onload之前发生）


应该做你想做的事
“我读过关于
noscript
标签的各种不好的东西。”真的吗？你遇到了什么？我问这个问题是出于好奇，而不是作为一个挑战，或者什么的。也许说“各种不好的东西”这有点言过其实，但我已经读过很多关于不使用它的好论据，大多数都在这里注明：谢谢！希望这能起作用，明天再试用，如果不行，我就不得不承认最后不得不求助于它。即使使用“domready”，速度仍然太慢在页面顶部的脚本上，您可以看到脚本要隐藏的输入的时间非常长：/
label + input {
    display: none;
}
label:hover + input, /* <- added this selector */
label + input:focus {
    display: inline-block;
}​

function bootstrap(ev) {
    alert("This is the code to launch on domready");
}

YUI().use(
    "event", 
    function (Y) {
        Y.on("domready", bootstrap);  
    }
);