Emulate XMP tag with script tag and allow to copy content

Refresh

March 2019

Views

72 time

6

Officially <xmp></xmp> is deprecated (but still supported by major browsers), so to be on the lawful side for new applications the only workaround is to replace xmp tag (that don't parse HTML's tags) is to use as I found: <script type="text/plain">...</script>.

Everything is Ok with this solution, but Firefox (ONLY) preventing to copy/paste content enclosed in <script type="text/plain"></script> tag.

Asking to fix it on bugzilla may takes 10-15 years as it is with similar firefox's issue, when one can't copy content from disabled text/textarea elements, so I asking here, may be someone get some workaround to allow copy/paste content enclosed in <script type="text/plain">...</script> or may be there is something better xmp tag replacement to be compatible with nowadays browsers and rules.

Below is example, how I'm using <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.

To prevent offers to use <pre> or other solutions that modified original content (converting to HTML entities) I should say, - it won't work for me, I have to have original raw content inside <script> tag.

2 answers

0

A textarea will display raw HTML content. Setting it to readonly will, unlike the script solution, allow content to be copied/pasted in Firefox.

There are a couple of downsides:

  1. You cannot include </textarea> as part of your raw code.

  2. The textarea will need its width and height set manually to fit content.

.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>
jla
2

Well, I will answer my own question:

I reported to mozilla this issue as a bug and it was accepted and resolved pretty fast (Thanks a lot for that !!!). Described issue is fixed in Firefox and it will behave in the same manner as all other supported browsers beginning with version 68, so it save to use <script> tag as replacement for <xmp> tag now.