noscript 标签内的文本被输出为文本而不是表单答案

【问题标题】：text inside noscript tags is being outputted as text and not formnoscript 标签内的文本被输出为文本而不是表单
【发布时间】：2013-06-05 16:45:26
【问题描述】：

只要我打开没有 JavaScript 的网页，<noscript> 标签中的表单就会显示为代码，但在我刷新它之后似乎还不错。有没有一种方法可以在禁用 JavaScript 后立即正确显示表单，或者有没有一种方法可以在未启用 JavaScript 时立即重新加载页面？

我尝试过使用元刷新，但我想不出一种不使用 JavaScript 只重新加载一次的方法。

代码如下：

<div id="JS" class="span4" style="display: none">
<h2 class="side">contact</h2>
<h3 class="side">message</h3>
<br><br>

                <form id="animate" >
                    <input id="name" name="Name" type="text" value="" placeholder="Your Name" maxlength="25" >
                    <input id="email" name="Email" type="text" value="" placeholder="Your E-mail" maxlength="100">
                    <textarea id="Message" name="Message" placeholder="Your Message" spellcheck="true" rows="6"></textarea>
                    <input id="spam" type="text" name="spam" style="display: none;" value=""/>
                    <input id="submit" type="submit" name="submit" value="Submit"/>
                </form>
                <div style="color: black; font-family: urwgroteskregular;" id="thanks">
                    <h2> Thank you, your message has been received.</h2>
                </div>
            </div>
            <div class="span4" id="noScript">
                <noscript>
                    <h2 class="side">contact</h2>
                    <h3 class="side">message</h3>
                    <br><br>
                    <form action='process.php' method="post" >
                        <input name="Name" type="text" value="" placeholder="Your Name" required="" maxlength="25">
                        <input  name="Email" type="text" value="" placeholder="Your E-mail" required="" maxlength="100">
                        <textarea  name="Message" placeholder="Your Message" spellcheck="true" rows="6" required=""></textarea>
                        <input  type="text" name="spam" style="display: none;" value=""/>
                        <input type="submit" name="submit" value="Submit"/>
                    </form>
                </noscript>

            <script type="text/javascript">

                document.getElementById('JS').style.display = 'block';
                document.getElementById('noScript').style.display = 'none';

            </script>

【问题讨论】：

重新加载不正常的页面不是解决方案。发布代码或页面链接，我们会找到方法。最好的是css
停止制作没有 JavaScript 的网站。现在是 2013 年。
先生，我知道现在是 2013 年，我有两种形式，一种在启用 JS 时显示，另一种在未启用时显示。当我从 JS 切换到 no-JS 时，我在 noscript 中的所有代码都显示为代码，需要刷新。
所以使用 js 隐藏非 js 表单或在此处发布 html 以便我们了解为什么需要两个表单：document.write('<style>.nonjs { display:none}</style>')
@mplungjan 只需在问题中添加您的代码

标签： javascript html noscript

【解决方案1】：

我不知道是什么导致了<noscript> 问题，但我知道你在使用这种方法时走错了路。

查看输入表单的两个版本——除了这些不同之外，它们是相同的：

脚本版本在<form> 及其元素上添加了id 属性。
<noscript> 版本将action 和method 属性添加到<form>，并将required 属性添加到多个元素。

您应该做的是拥有此表单的单个实例并将其用于两个目的。添加来自两个版本的表单的所有属性。 id 属性在无 JS 的情况下不会有任何损害，而 action/method 和 required 属性在您使用 JavaScript 处理提交时不会有任何损害。（只需像往常一样使用.preventDefault() 调用来抑制正常的表单提交。）

所以表格最终是这样的：

<form id="animate" action="process.php" method="post" >
    <input id="name" name="Name" type="text" value=""
        placeholder="Your Name" required="" maxlength="25">
    <input id="email" name="Email" type="text" value=""
        placeholder="Your E-mail" required="" maxlength="100">
    <textarea id="Message" name="Message" placeholder="Your Message"
        spellcheck="true" rows="6" required="">
    </textarea>
    <input id="spam" type="text" name="spam"
        style="display: none;" value="">
    <input id="submit" type="submit" name="submit" value="Submit">
</form>

您的页面在<noscript> 部分中还有<h2> 和<h3> 标记以及脚本版本中的“谢谢”<div>，但您可以根据需要使用建议的技术隐藏和显示这些标记在其他答案中。

【讨论】：

是的，我也用过这种方式，它更简单，更容易理解。无论如何感谢您的帮助。 :)

【解决方案2】：

为什么不用js隐藏非js表单

<html>
<head>
<script>
document.write('<style>.nonjs { display:none}</style>');
<script>

【讨论】：

如果我这样做了，由于代码在脚本标签内，它不会根本不显示吗？
假设 CSS 处于活动状态，此代码将隐藏类名称为 nonjs 的任何内容

【解决方案3】：

大多数人通过将类 no-js 放在他们的 HTML 中来处理这个问题，并包括 Modernizr library，它会删除它并用 js 替换它 - 这样您可以包含以下 CSS：

html.js #noScript {
  display: none;
}

...脚本浏览器不会显示第二种形式。

如果您不想包含所有 Modernizr，只需确保您的 HTML 包含类：

<html class="no-js">

然后在<head>中包含以下代码：

void function addScript(){
  var html = document.lastChild;
  html.className = html.className.replace('no-js','js');
}();

脚本浏览器会读取并执行这个脚本，它会替换类。现在您可以定制您的 CSS 以仅针对脚本浏览器：

html.js #noScript {
  display: none;
}

排序！无需让页面呈现表单，然后使用 JS 将其删除。无需将其嵌套在 <noscript> 中。根据脚本的存在是否简单地显示它。这种技术的美妙之处在于您可以对其进行扩展：可以将 js-only 或 no-js-only 类添加到元素中，以指定它们应该在哪种情况下显示，等等。

【讨论】：

这依赖于 CSS。什么保证禁用（或启用）JavaScript 的浏览器不会禁用 CSS？
看起来这和我的建议完全一样，但还有很多工作要做
@JukkaK.Korpela 没有。默认情况下，额外的内容会呈现。隐藏它是一种增强。
@mplungjan 我不知道，我发现键入该代码和周围的段落相对容易。您的评论大约是实现此功能所需的额外字符的一半 - 关键区别在于它更具可扩展性 - 您也可以测试 html.no-js，并且您可以添加其他基于特征检测的类。

【解决方案4】：

我发现当您在 noscript 标记中使用格式错误的 html 时，往往会发生这种情况，例如将 html 与 xhtml（坏习惯）混合，例如与 html 文档类型为 html 的 html 页面：

<noscript>
  <img src="image.jpg" />
</noscript>

代替：

<noscript>
  <img src="image.jpg" >
</noscript>

似乎会导致这种情况，但这似乎不会导致 no script 标签之外的问题，至少在所有主要浏览器中都是如此。

至于上述使用 noscript 标签以外的东西的答案。忘记modenizer可笑的大量代码来做一些简单的事情！

您可以使用带有 class="noscript" 的 div，默认情况下隐藏所有其他内容，然后使用脚本隐藏 noscript div 并显示其他启用 js 的内容。
如果启用 js 的浏览器无法下载您的脚本，这也可以工作，这可能由于多种原因而发生。这种方法的缺点是，即使浏览器启用了 js，img 标签中的任何外部内容仍将由浏览器预加载器下载，因此 noscript 标签可以更好。最好的方法当然取决于你在做什么

【讨论】：