3

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

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

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

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

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

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

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

4

3 回答 3

2

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

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

于 2012-03-27T12:15:44.980 回答
1

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

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

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

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 小提琴演示。

于 2012-03-27T12:08:20.273 回答
1

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);  
    }
);

应该做你正在寻找的

于 2012-03-27T12:17:33.890 回答