为什么不IE7复制< pre>< code>阻止正确的剪贴板？ [英] Why doesn't IE7 copy <pre><code> blocks to the clipboard correctly?

问题描述

我们注意到IE7在Stack Overflow上发布了代码块，具有奇怪的行为。例如，这个小代码块：

We've noticed that IE7 has an odd behavor with code blocks posted on Stack Overflow. For example, this little code block:

public PageSizer(string href, int index)
{
    HRef = href;
    PageIndex = index;
}

从IE7复制并粘贴，结果如下：

Copy and pasted from IE7, ends up like this:

public PageSizer(string href, int index){    HRef = href;    PageIndex = index;    }

不完全是我们想到的......底层的HTML源代码实际上看起来不错;如果您查看源代码，您会看到：

Not exactly what we had in mind.. the underlying HTML source actually looks fine; if you View Source, you'll see this:

<pre><code>public PageSizer(string href, int index)
{
    HRef = href;
    PageIndex = index;
}
</code></pre>

那么我们做错了什么？为什么IE7不能以理性的方式复制和粘贴这个HTML？

So what are we doing wrong? Why can't IE7 copy and paste this HTML in a rational way?

更新：这个具体与<$在运行时通过JavaScript修改的块< pre> < code> 正确渲染和复制;它是该HTML的JavaScript修改版本，其行为不如预期。请注意，复制和粘贴到写字板或Word的作品是因为IE将富文本剪贴板中的不同内容与记事本从其获取数据的纯文本剪贴板相比较。

Update: this specifically has to do with <pre> <code> blocks that are being modified at runtime via JavaScript. The native HTML does render and copy correctly; it's the JavaScript modified version of that HTML which doesn't behave as expected. Note that copying and pasting into WordPad or Word works because IE is putting different content in the rich text clipboard compared to the plain text clipboard that Notepad gets its data from.

推荐答案

似乎这是IE6的一个已知错误，prettify.js有一个解决方法。具体来说，它将BR标签替换为'\r\\\
'。

It seems that this is a known bug for IE6 and prettify.js has a workaround for it. Specifically it replaces the BR tags with '\r\n'.

通过修改支票以允许IE6或7，剪切和粘贴将起作用正确的来自IE7，但它会使用换行符和空格进行呈现。通过检查IE7并提供'\r'而不是'\r\\\
'，它将继续剪切并粘贴并正确呈现。

By modifying the check to allow for IE6 or 7 then the cut-and-paste will work correctly from IE7, but it will render with a newline followed by a space. By checking for IE7 and providing just a '\r' instead of a '\r\n' it will continue to cut-and-paste and render correctly.

将此代码添加到prettify.js中：

Add this code to prettify.js:

function _pr_isIE7() {
  var isIE7 = navigator && navigator.userAgent &&
       /\bMSIE 7\./.test(navigator.userAgent);
  _pr_isIE7 = function () { return isIE7; };
  return isIE7;
}

，然后修改prettyPrint函数，如下所示：

and then modify the prettyPrint function as follows:

   function prettyPrint(opt_whenDone) {
     var isIE6 = _pr_isIE6();
+    var isIE7 = _pr_isIE7();

...

-        if (isIE6 && cs.tagName === 'PRE') {
+        if ((isIE6 || isIE7) && cs.tagName === 'PRE') {
          var lineBreaks = cs.getElementsByTagName('br');
+         var newline;
+         if (isIE6) {
+           newline = '\r\n';
+         } else {
+           newline = '\r';
+         }
          for (var j = lineBreaks.length; --j >= 0;) {
            var lineBreak = lineBreaks[j];
            lineBreak.parentNode.replaceChild(
-               document.createTextNode('\r\n'), lineBreak);
+               document.createTextNode(newline), lineBreak);
          }

您可以看到这里的工作示例。

注意： I还没有在IE6中测试原始的解决方法，所以我猜测它没有IE7中看到的'\ n'造成的空间渲染，否则修复更简单。

Note: I haven't tested the original workaround in IE6, so I'm guessing it renders without the space caused by the '\n' that is seen in IE7, otherwise the fix is simpler.

这篇关于为什么不IE7复制&lt; pre&gt;&lt; code&gt;阻止正确的剪贴板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！