当今Web应用程序需要提供更好的用户体验，其中一个重要方面是让用户可以轻松地复制内容。在过去，Flash通常被用来实现此功能，但随着HTML5的发展，我们可以使用更优雅的解决方案来实现它。本文将介绍如何使用纯JavaScript和HTML5 Clipboard API，跨浏览器地实现这一目标。
HTML5 Clipboard API
首先，让我们了解一下浏览器提供的HTML5 Clipboard API。Clipboard API提供了访问剪贴板的接口，使我们能够读取和写入剪贴板内容。该API包含两个方法：
readText()：从剪贴板中读取文本writeText(text)：向剪贴板中写入文本
这两个方法允许我们在JavaScript中直接使用剪贴板，而不需要任何外部库或插件。然而，需要注意的是，该API并不是所有浏览器都支持，因此我们需要提供备用方案。
备用方案
为了跨浏览器支持，我们可以结合使用选区（Selection）和执行命令（execCommand）。选区表示DOM树中用户选择的范围，而执行命令则是执行一些预定义的命令，例如剪切、复制和粘贴。通过结合这两个API，我们可以在不同的浏览器中实现类似的功能。
选区
选区由一个起点（anchor）和一个结束点（focus）组成，表示用户选中的文本范围。我们可以使用window.getSelection()方法获取当前选区对象。一旦我们获取了选区对象，就可以使用它来读取或操作选区中的文本。
----- --------- - ---------------------- ----- ---- - ---------------------
上面的代码片段演示了如何使用选区对象读取所选文本并将其存储在变量text中。
执行命令
执行命令是另一种操作选定文本的方式。我们可以使用document.execCommand(commandName)方法执行预定义的命令。要复制选定文本，我们将使用“copy”命令。
-----------------------------
该命令将尝试将所选文本复制到剪贴板中。但是，请注意，某些浏览器可能会阻止此操作，因为它需要用户明确地授权。在这种情况下，我们需要提供一个备用方案以确保功能正常。
完整示例代码
下面是一个完整的示例代码，演示如何在不使用Flash的情况下将选定文本复制到剪贴板。该代码使用HTML5 Clipboard API和备用方案，以确保在不同浏览器中的兼容性。
--------- -----
----- ----------
------
----- ----------------
----------- -- --------- ---------------
-------
------
--------- ---- ---- ----- --- ----- --- ------ -- ---- -- -- --------------
-- ------------------- ----- ----- --- ----- ----------- ---------- ---------
------- ----------------- -- ------------------
--------
----- ------- - -----------------------------------
----- -------- - ------------------------------------
--------------------------------- -- -- -
-- --------------------- -
----------------------------------------------------
------------- -- -------------
- ---- -
----- --------- - ----------------------
----- ----- - -----------------------
-----------------------------------
----------------------------
--------------------------
--- -
-----------------------------
------------- -- -------------
-
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------