Question

我有一个简单的发货选项表单，当有人从下拉列表中选择一个新选项时，我使用javascript自动提交表单。

为了支持没有javascript的浏览器，还有一个提交表单的按钮。使用javascript隐藏此按钮。

但是，这意味着我的按钮在短时间内可见，并且可能会导致闪烁，因为其余内容会重新格式化。

任何人都可以建议一种创建按钮的方法，使其开始隐藏，但只有在javascript不可用时才可见吗？例如，从display：none开始;并神奇地改为显示：block;当且仅当没有javascript。

Answer 1

只需将任何内容放入<noscript> ... </noscript>标记中，然后只有在未启用/可用JavaScript时才会显示。

Answer 2

这取决于你如何隐藏它，你准备好使用DOM还是准备好窗口？ Window ready等待所有图像下载，这通常太长了。

出于可访问性，原因，我将它隐藏在加载的DOM上。但是为了确保它不会出现，你可以把它放在一个noscript元素中

<noscript>
    <input type="submit" />
</noscript>

至于你的最后一段，在没有JavaScript的情况下，不会发生这样的事情。

Answer 3

只需编写不引人注目的javascript：http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/。

您所做的是将您的页面编写为普通页面，但是，然后使用底部的代码启动javascript，并开始编辑页面以使其更具交互性。这样做的好处是，如果他们关闭了javascript页面是正常的，但是，如果他们打开了，那么你可以优雅地添加更多功能。

我不是该选项的忠实粉丝，因为这可能意味着需要下载许多不需要的额外代码。

在此页面上查看评论5，以获得能够在实际显示任何内容之前进行更改的良好解决方案： http://dean.edwards.name/weblog/2006/06/again/

Answer 4

您可以在提交按钮之前和之后使用脚本来编写隐藏的div元素开始和结束标记。

Answer 5

一个选项是从显示的按钮开始，然后从JavaScript修改其CSS：

<head>
    ...
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8">
    <script>
        document.styleSheets[0].addRule(".hideMe", "display:none");
    </script>
    ...
</head>

修改样式表而不是按钮（并将此代码放在onload的之外）可确保在绘制按钮之前隐藏它。

如何在Javascript不可用时显示内容，在javascript可用时隐藏它并且在任何一种情况下都不闪烁？

5 个答案: