使用脚本标签仿真XMP标签，并允许复制内容

官方 <xmp></xmp>被弃用（但仍由主要浏览器提供支持），因此，要在新应用程序的合法方面，唯一的解决方法是替换xmp标签（不会解析HTML的标签）如我发现：<script type="text/plain">...</script>。

此解决方案的一切都可以，但是Firefox（仅）阻止了<script type="text/plain"></script>标签中包含的内容/粘贴内容。

要求在Bugzilla上修复它可能需要10 - 15年的时间，因为它在Firefox的问题上，当一个人无法从残疾的文本/文本元素元素中复制内容，所以我在这里问，可能有人会得到一些解决方法以允许复制/粘贴的内容包含在<script type="text/plain">...</script>中，或者可能有更好的xmp标签替代品可以与当今的浏览器和规则兼容。

下面是示例，我如何使用<script type="text/plain">...</script>

<!doctype html>
<html lang="en">
<head>
  <title>Attempt to emulate depricated XMP tag</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    script[type="text/plain"] {
      display: block;
      width: 100%;
      white-space: pre;
      box-sizing: border-box;
      user-select:text !important;
    }
  </style>
</head>
<body>
<script type="text/plain" readonly>
  Try to select then copy and paste me somewhere else ...
    and you will fail...
      WITH FireFox ONLY !!!
 <p>raw HTML tag "p" here for example</p>
</script>
</body>
</html>

P.S。

为了防止要约使用<pre>或其他修改原始内容（转换为HTML实体）的解决方案，我应该说 - 它对我不起作用，我必须在<script> TAG中具有原始原始内容。

好吧，我会回答自己的问题：

我向Mozilla报告了这个问题，它被接受并得到了很快解决（非常感谢！！！）。所描述的问题是在Firefox中固定的，它的行为将与以68版开头的所有其他支持的浏览器相同，因此使用<script> TAG作为<xmp>标签的替换。

现在。

textarea将显示原始的HTML内容。将其设置为ReadOnly，与脚本解决方案不同，可以在Firefox中复制/粘贴内容。

有几个弊端：

您不能将</textarea>作为原始代码的一部分。
Textarea需要手动设置其宽度和高度设置以适合内容。

.rawcode {
    resize: none;
    border: 0;
    outline: 0;
    background-color: #fff;
}

<textarea class="rawcode" readonly>
    Try to select then copy and paste me somewhere else ...
    and you should succeed.
    <p>raw HTML tag "p" here for example</p>
</textarea>

相关内容

最新更新

热门标签：