使用CSS或Javascript复制/剪切时从文本中删除样式 [英] Remove Styles from Text when Copying / Cutting using CSS or Javascript

问题描述

哟，

在这一段时间内一直在打扰：如何复制/剪切风格的文字而不带任何风格的行李（背景颜色，颜色等）？

Alright been noodling on this one for a while: How copy/cut styled text without bringing along any style baggage (background-color, color, etc)?

已经挫败的几种攻击路线：

Couple of routes of attacks that have been foiled:

1. 使用:: select？不同样式的文本 不起作用，不能复制:: style


2. 使用jQuery的选择绑定样式选择的文本 这只适用于输入，不适用于p，div
通过使用jQuery绑定事件以复制/粘贴来删除样式？ 无法访问复制的对象以删除内容，尝试使用e.preventDefault（）;

1. Style the text differently using ::select? Doesn't work, ::style isn't copied
2. Style the selected text using jQuery's select binding This only works for inputs, not p, divs
3. Intercept and remove style by binding an event to copy/paste using jQuery? Can't access the copied object to remove stuff, tried using e.preventDefault(); then returning the event object but that didn't work either
4. Modify the clipboard data once it's been saved? Also no dice, most browsers wont let you into this without flash and some sort confirmation

无论如何，想法？看起来对于有白色背景颜色的网站非常有用。

Anyway, thoughts? Seems like it would be very useful for sites that have white background colors.

推荐答案

我没有时间编写示例，但您可以通过键盘快捷键触发剪切/复制。它不适用于通过上下文菜单或编辑菜单选项进行剪切/复制，因为它依赖于在剪切或复制事件触发之前更改用户选择。

I haven't got time to code up an example now, but you could do this for cut/copy triggered by keyboard shortcuts. It wouldn't work for cut/copy via context menu or Edit menu options because it relies on changing the user selection before the cut or copy event fires.

步骤：

1. 处理 Ctrl - C 和 Ctrl - X 键盘快捷键和Mac等效键。


2. 在此处理程序中，创建一个离屏元素（绝对位置，左对-10000px，选择内容。你可以使用 window.getSelection（）。getRangeAt（0）.cloneContents（）来做到这一点，


3. 执行任何您喜欢的操作，以更改屏幕外元素内容的样式。


4. 移动选择以包含离屏元素的内容，以便剪切或复制此内容。


5. 使用<>添加短暂延迟（几毫秒） code> window.setTimeout（）调用一个删除屏幕外元素并恢复原始选择的函数。

1. Handle the Ctrl-C and Ctrl-X keyboard shortcuts and the Mac equivalents.
2. In this handler, create an off-screen element (absolute position and left -10000px, say) and copy the selected content into it. You can do this using window.getSelection().getRangeAt(0).cloneContents(), although you'll need separate code for IE < 9 and you should check the selection is not collapsed.
3. Do whatever you like to to change the styling of the content of the off-screen element.
4. Move the selection to encompass the content of the off-screen element so that it is this content that is cut or copied.
5. Add a brief delay (a few milliseconds) using to window.setTimeout() that calls a function that removes the offscreen element and restores the original selection.

这篇关于使用CSS或Javascript复制/剪切时从文本中删除样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！