在 JavaScript 中复制/粘贴?

发布于 2024-08-15 15:03:05 字数 156 浏览 3 评论 0原文

我知道这个问题现在已经被问过一百万次了,但我真的找不到一个好的最新解决方案。

我已经实现了自己的菜单,为用户提供剪切、复制和粘贴到我的 Web 应用程序中的能力。 但我不确定如何在 Firefox、IE、Safari/Chrome 上实际使用剪贴板。

感谢您的帮助。

I know this question was asked like a million times by now, but I couldn't really find a good up-to-date solution.

I've implemented my own menu to provide the user the ability to Cut, Copy and Paste into my WebApp.
But I'm not sure how to actually work with the clipboard on Firefox, IE, Safari/Chrome.

Thank you for your help.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

梦屿孤独相伴 2024-08-22 15:03:06

我刚刚就这个问题写了一篇详细的技术博客文章主题(我在 Lucidchart 工作,我们最近对剪贴板进行了彻底检查)。帖子中包含这个小提琴,它是通过 Javascript 复制和粘贴的工作示例。

好消息是,此示例为您提供了工作代码,用于在用户使用剪贴板热键时设置/获取任何受支持的剪贴板数据类型。

坏消息是使用您自己的上下文菜单进行复制和粘贴是有问题的。即使 Google 也无法解决这个问题(尝试在 Firefox 中使用上下文菜单复制或粘贴到 Google Docs 中)。您将能够在 IE 中轻松使用它。这是因为您可以随时从 Javascript 通过以下方式访问 ClipboardData 对象:(

window.clipboardData

但是,当您尝试在系统剪切、复制或粘贴事件之外执行此操作时,IE 将提示用户授予 Web 应用程序剪贴板权限。)

在 Chrome 中,您可以创建一个 Chrome 扩展程序,为您的网络应用程序提供剪贴板权限(这就是我们为 Lucidchart 所做的) 。然后,对于安装了您的扩展的用户,您只需在单击菜单选项时自行触发系统事件:

document.execCommand('copy');

Firefox 似乎有一些选项 允许用户授予某些网站访问剪贴板的权限,但我个人还没有尝试过这些。

I just wrote a detailed technical blog post on this very subject (I work for Lucidchart and we recently did an overhaul on our clipboard). Included in the post is this fiddle which is a working example of copying and pasting via Javascript.

The good news is that this example gives you working code for setting/getting any supported clipboard data types whenever the user uses a clipboard hotkey.

The bad news is that using your own context menu to copy and paste is problematic. Even Google can't get around this (try using context-menu copy or paste in Google Docs in Firefox). You'll be able to get it to work without too much trouble in IE. This is because you can access the clipboardData object at anytime from Javascript via:

window.clipboardData

(When you attempt to do this outside of a system cut, copy, or paste event, however, IE will prompt the user to grant the web application clipboard permission.)

In Chrome, you can create a chrome extension that will give your web app clipboard permissions (this is what we do for Lucidchart). Then for users with your extension installed you'll just need to fire the system event yourself when they click the menu option:

document.execCommand('copy');

It looks like Firefox has some options that allow users to grant permissions to certain sites to access the clipboard, but I haven't tried any of these personally.

你尝试过吗:
http://ericphan.info/development/cross -browser-copy-and-paste-with-jquery-copy/

更新:
该链接不可用,因此我从缓存中复制内容:

当客户报告 Web 应用程序中的错误时,我正在为 SSW 开发一个客户端项目

该错误涉及动态生成的 mailto 链接,当您选择多个员工时,该链接会更新。客户在选择发送电子邮件的员工超过 10 名时报告错误。他的 Lotus Notes 邮件客户端弹出一条错误消息:

处理命令行参数时出错

我自己对此进行了测试,发现 Outlook 2007 在 mailto 链接停止工作之前可以轻松支持 30-40 名员工的电子邮件。
原因 事实

证明,mailto 规范有限制,邮件客户端也有限制。 Lotus Notes 仅处理 mailto 链接中的 240 个字符,而其他现代邮件客户端(如 Outlook 2007)支持 2083 个字符(URL 的最大长度),

这解释了测试中的差异。
修复 - JQuery 来救援

由于这是 HTML 规范的限制,我们需要另一个解决方案来满足客户的要求:“我希望能够选择多个员工并向他们所有人发送电子邮件”

我们可以创建一个使用 SMTP 发送电子邮件的电子邮件表单 - 但客户希望使用 Lotus Notes 作为他的邮件客户端。

我们最终更改了“电子邮件”按钮,将所有电子邮件(以逗号分隔)复制到剪贴板上,并弹出一个新的电子邮件窗口。客户所要做的就是按 CTRL + V 并将电子邮件粘贴到“收件人”字段中。这是最快且最具成本效益的解决方案,使客户能够灵活地使用自己的电子邮件客户端。

有一个名为 jquery.copy 的 JQuery 插件,它通过使用 flash (swf) 文件提供跨浏览器复制和粘贴功能。这与我博客上的语法荧光笔的工作原理类似。

引用 jquery.copy.js 文件后,将数据推送到剪贴板所需要做的就是运行以下命令:

$.copy("some text to copy");

很好,很简单;)

注意:您可能需要更改 jquery.copy.js 中 SWF 文件的路径让它发挥作用

did u try :
http://ericphan.info/development/cross-browser-copy-and-paste-with-jquery-copy/

UPDATE:
the link is not available so i copy the content from cache :

The Scenario

I was working on a client project for SSW when the client reported a bug in the web app.

The bug involved a dynamically generated mailto link that got updated when you selected multiple employees. The client was reporting an error when he selected more than 10 employees to email. His Lotus Notes mail client popped up an error saying:

Error processing command line arguments

Testing this myself I found that Outlook 2007 could easily support the emails of 30-40 employees before the mailto link stopped working.
The Cause

It turns out that the mailto spec has a limit and the mail clients also have a limit. Lotus Notes only handles 240 characters in the mailto link and other modern mail clients like Outlook 2007 support the 2083 characters - the max length of a URL

This explains the discrepancy in testing.
The fix - JQuery to the rescue

Since this is a limitation of the HTML spec we needed another solution to meet the client’s requirement of “I want to be able to select multiple employees and send an email to all of them”

We could have created an email form that used SMTP to send out the email - but the client wanted to use Lotus Notes as his mail client.

We ended up changing the “email” button to copy all the emails (comma separated) onto the clipboard and popped open a new email window. All the client had to do was hit CTRL + V and paste the emails into the TO field. This was the quickest and most cost effective solution that gave the client the flexibility to use their own email client.

There is a JQuery plugin called jquery.copy that provided cross browser copy and paste by using a flash (swf) file. This is similar to how the syntax highlighter on my blog works.

Once you reference the jquery.copy.js file all you need to do to push data into the clipboard is run the following:

$.copy("some text to copy");

Nice and easy ;)

Note: you may need to change the path the the SWF file in jquery.copy.js to get this to work

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文