Question

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

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

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

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

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

方法2 - 使用noscript标记。。。但是我厌恶这样做，因为它是一个简单的解决方案，我已经阅读了关于noscript标签的各种不好的事情。

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

Answer 1

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

我认为解决方案是使隐藏脚本成为代码的第一部分，如果需要，在呈现下拉列表后立即在脚本块中运行。

Answer 2

我不完全确定你想在没有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;
}

（这显示了点击dateStart后的label输入（其风格类似于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 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);  
    }
);

应该做你想要的事

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

3 个答案: