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

Question

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

我使用 YUI 来增强表单，因此日历输入使用 YUI calendar widget，下拉列表转换为输入的水平列表，用户只需单击一次即可选择任何输入，而不是双击下拉框（希望有道理，不知道怎么解释清楚）

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

这不是因为我不一定知道怎么做，而是我尝试过的两种方法似乎都不尽如人意。

方法 1 - 我尝试使用 YUI 隐藏文本框和下拉列表，这似乎是理想的解决方案，但是在加载页面时有相当明显的延迟（尤其是第一次)，文本框和下拉列表至少可见一秒钟。我在body标签结束之前包含了这个脚本，有什么办法可以用YUI在onload上运行它？会有帮助吗？

方法 2 - 使用 noscript 标签。 . .但是我不愿意这样做，因为这将是一个简单的解决方案，但我已经阅读了有关 noscript 标签的各种不好的内容。

有没有办法让方法一起作用？或者有没有我还没有遇到过的更好的方法？

Answer 1

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

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

您可以使用以下 CSS 显示/隐藏 input：

label {
    color: #f90;
    cursor: pointer;
}
label:hover {
    text-decoration: underline;
}
label + input {
    display: inline-block; /* or 'display: none' and omit the following two lines */
    height: 0;
    border-width: 0;
}
label + input:focus {
    height: auto; /* or 'display: inline', and omit the following line */
    border-width: auto;
}

（这显示了单击label 后的dateStart 输入（其样式类似于a 元素，以与UI 预期保持一致）。显然，没有JavaScript，YUI 日历小部件无法显示（因为它是与 JS 一起添加/使用的），但基本的日期输入字段将在那里，并且可以访问。

---

已编辑，经过测试（使用 Chromium 17/Ubuntu 11.04）（尽管之前在 localhost 上成功测试）表明 input 在页面上可见之前无法接收 :focus ，以下修改后的 CSS 似乎可以解决该问题：

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

JS Fiddle demo.

Answer 2

通常，显示/隐藏元素的脚本非常快。我能想到第一个慢的唯一原因是因为脚本在元素渲染后运行很长时间。在您进行隐藏或其他某种延迟之前，可能会运行一些昂贵的脚本。

我认为解决方案是让隐藏脚本成为代码的第一部分，如有必要，在呈现下拉菜单后立即在脚本块中运行。

Answer 3

Yui 有 domready 事件（发生在 onload 之前一点）

http://yuilibrary.com/yui/docs/api/classes/YUI.html#event_domready

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

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

应该做你正在寻找的东西