您的位置：首页 > Web前端 > JavaScript

使用JavaScript读取所选文本并将其复制到剪贴板

2018-09-19 13:28 549 查看
询问大多数开发人员如何将用户选择的内容复制到剪贴板，他们会提到Flash的需求（因此 Zeroclipboard等脚本的流行 ）。然而，这种想法的调整现在归功于最近浏览器对JavaScript中关键技术的支持的改进，这使得复制到剪贴板本身成为可能。这种JavaScript方法在IE9 +，Firefox 41+和Chrome 42+中得到支持，最终为浏览器本身带来了原生剪切/复制支持。在本教程中，我们将看到如何阅读用户选择的文本内容，动态选择页面上的一些文本，最后但并非最不重要的是，将所选内容复制到剪贴板，所有这些都只使用JavaScript。我们现在正进入无Flash区域！
document.execCommand()



检索用户选择的文本内容

让我们从顶部开始，检索用户在页面上选择的内容，直到任何文本内容。为此，我们使用了所有现代浏览器和IE9 +支持的方法 ：
window.getSelection()

1
2
3
4
五
6
7
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
function
getSelectionText（）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

var
 
selectedText =“”</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

if
（window.getSelection）{
//所有现代浏览器和IE9 +</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

selectedText = window.getSelection（）。toString（）</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
<
5b4
code>>
}</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

返回selectedText</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

}</font></font>

window.getSelection()
返回页面上当前选定的文本，并返回包含该数据的对象。要检索实际文本，我们使用它将其转换为字符串。以下示例在用户将鼠标悬停在文档上时调用我们的函数，以便查看用户选择的内容（如果有）：
Selection
toString()
getSelectionText()

1
2
3
4<
2d90
/p>五
6
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>document.addEventListener（
'mouseup'
，
function
（）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

var
 
thetext = getSelectionText（）</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

if
（thetext.length> 0）{
//检查是否选择了一些文本</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

console.log（thetext）
//记录用户在页面上选择的任何文本内容</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

}</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

}，
false
）</font></font>

我们首先检查是否选择了一些文本，就像用户只是单击页面一样，没有。


选择并读取页面上非表单元素的文本内容
继续前进，我们还可以负责并动态选择然后在页面上检索我们想要的内容，而不是简单地检索用户选择的内容，例如特定DIV的内容。这与简单地使用元素
innerHTML
或
innerText
属性来获取其内容非常不同; 我们希望 通过JavaScript 实际选择该内容，这会打开其他可能的操作，例如将其复制到用户的剪贴板。
要选择非表单字段元素的文本内容，我们首先创建一个新的 Range对象并将其设置为包含所需的元素。然后，将范围添加到
Selection
对象以实际选择它。让我们看看它是如何工作的，这个函数根据传入元素的元素动态选择元素的文本内容：
1
2
3
4
五
6
7
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
function
 
selectElementText（el）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

var
 
range = document.createRange（）
//创建新的范围对象</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

range.selectNodeContents（el）
//设置范围以包含所需的元素文本</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

var
 
selection = window.getSelection（）
//从当前用户选择的文本中获取Selection对象</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

selection.removeAllRanges（）
//取消选择任何用户选择的文本（如果有）</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

selection.addRange（range）
//为Selection对象添加范围以选择它</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

}</font></font>

要创建一个用于添加范围的对象，我们使用; 因为默认情况下此方法会返回用户选择的文本（如果有的话），所以我们会立即调用其方法来清除平板。然后，我们开始创建一个空白范围，将元素的内容归零以选择使用，然后将该范围添加到对象中以进行选择。
Selection
window.getSelection()
removeAllRanges()
range.selectNodeContents()
Selection

一旦我们选择了我们想要阅读的文本，我们就转向我们之前的
getSelectionText()
方法来读取所选元素的内容，例如：
演示：
“我的妈妈总是说，'生活就像一盒巧克力。你永远不会知道你会得到什么。'” - Forrest
选择并检索文本
代码：
1
2
3
4
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
var
 
para = document.getElementById（
'para'
）</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

selectElementText（para）
//选择我们希望阅读的元素文本</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

var
 
paratext = getSelectionText（）
//读取用户选择</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

alert（paratext）
//提醒“我的妈妈总是说...”</font></font>



选择和读取表单元素的内容，如INPUT文本或TEXTAREA
为了选择和读取表格相关的字段值，例如INPUT文本和TEXTAREA，该过程不同于选择常规文本。我们大多数人已经知道选择表单字段的整个值，我们可以使用
inputElement.select()*
，并检索该值，探测
inputElement.value
。但是，还可以通过编程方式选择字段值的一部分并获取该值。让我们看看如何做到这一点。
- 以编程方式选择字段值的一部分
要动态选择INPUT文本或TEXTAREA元素的一部分，请使用此字段指示所需选择的起始和结束索引：
formElement.setSelectionRange()

1
2
3
4
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
var
 
emailfield = document.getElementById（“email”）</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

emailfield.focus（）
//在setSelectionRange（）工作之前，这在大多数浏览器中都是必需的</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

emailfield.setSelectionRange（0,5）
//选择输入字段的前5个字符</font></font><font></font><font style="vertical-align: inherit;"><font style=
16c8
"vertical-align: inherit;">

emailfield.setSelectionRange（5，emailfield.value.length）
//选择输入字段的第5个到最后一个字符</font></font>

请注意，第二个参数
formElement.setSelectionRange()
应该是要选择的结束字符的索引加1，因此要选择表单字段的前5个字符，要输入的结束索引值应为5或4（第5个字符的索引） ）加1。
演示：
选择前5个字符   选择第5个到最后一个字符
*注意： 在iOS设备中（从iOS9开始），使用
inputElement.select()
快速选择所有表单元素的内容似乎不起作用。但是，使用
inputElement.setSelectionRange()
确实。因此，以下选择跨浏览器和设备的所有表单字段的文本：

inputElement.setSelectionRange(0,inputElement.value.length)

- 读取字段值的选定部分
无论如何选择表单字段的值的一部分，无论是通过使用
setSelectionRange()
动态选择该部分，还是用户拖动他/她的鼠标来进行用户定义的选择，检索选择的方法是获取指数选择的开始和结束字符，然后使用它们从表单字段的值中提取该部分。我们可以使用以下方法获取活动选择的索引：
formElement.selectionStart
：所选文本的第一个字符的索引。如果未选择任何文本，则它包含输入光标后面的字符的索引。

formElement.selectionEnd
：所选文本的最后一个字符的索引。如果未选择任何文本，则它包含输入光标后面的字符的索引。

上述属性对于从表单字段中获取任何用户选定文本特别有用，其中选择的索引尚不为人所知。以下演示回应了用户使用以下属性从TEXTAREA中选择的内容：
演示（在textarea中选择一些文本）：

输出：
代码：
1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
><textarea id =“quote”cols =“50”rows =“5”></font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

这里有一些文字</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

</ textarea>的</font></font><font></font>

<font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

<div id =“output”> </ div></font></font><font></font>

<font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

<SCRIPT></font></font><font></font>

<font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

var
 
quotearea = document.getElementById（
'quote'
）</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

var
 
output = document.getElementById（
'output'
）</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

quotearea.addEventListener（
'mouseup'
，
function
（）{</
5b4
font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

if
（
this
.selectionStart！=
this
.selectionEnd）{
//检查用户是否在字段内选择了一些文本</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

var
 
selectedtext =
this
.value.substring（
this
.selectionStart，
this
.selectionEnd）</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

output.innerHTML = selectedtext</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

}&
b68
lt;/font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

}，
false
）</font></font><font></font>

<font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

</ SCRIPT></font></font>

我们
mouseup
在目标TEXTAREA上附加一个“ ”事件，以便在用户将其置于其中时进行监听。在事件处理函数内部，为了检测用户选择的内容，首先，我们检查TEXTAREA 
selectionStart
 和
selectionEnd
属性是否包含不同的值 - 如果它们相同，则表示没有选择任何内容，在这种情况下它们都指向输入光标后面的字符。如果它们的值不同，我们继续将选定文本的索引映射到表单字段值的值，以使用导出实际选定的文本
formElement.value.substring()
。


将所选文本复制到用户剪贴板
好了，现在关于如何阅读页面上所选内容的细节，无论是在页面上，还是在特定的DIV或表单元素内，我们都可以继续下一个紧迫的问题，实际上是复制那个内容到剪贴板。正如本教程开头所提到的，它归结为使用该方法执行命令以“复制”（或“剪切”）文本到剪贴板：
document.execCommand()

1
2
3
4
五
6
7
8
9

2d98
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
function
 
copySelectionText（）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

var
 
copysuccess
// var检查execCommand是否成功执行</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

尝试{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

copysuccess= document.execCommand（“copy”）
//运行命令将所选文本复制到剪贴板</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

}
catch
（e）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

copysuccess= 
false
</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

}</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

返回copysuccess</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

}</font></font>

这里的关键是行
document.execCommand("copy")
，它实际上执行动作以将页面上当前选择的任何内容复制到剪贴板。为了检测浏览器是否
execCommand()
 正确支持该方法，我们将操作放在一个
try/catch()
块中; 如果调用
execCommand()
失败，我们知道浏览器不支持此方法。
我们可以使用我们的新变形
copySelectionText()
函数与任何以前的方法来选择/检索一些文本然后将其复制到剪贴板。例如，当用户将鼠标悬停在文档上时，下面的代码段将复制用户在页面上选择的任何内容：
1
2
3
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>document.body.addEventListener（
'mouseup'
，
function
（）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

var
 
copysuccess= copySelectionText（）
//将用户选定的文本复制到剪贴板</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

}，
false
）</font></font>

我们可以改进这个过程，但如果用户选择实际上包含一些数据，则只执行“复制”操作; 例如，如果用户只是单击页面而不突出显示任何内容，则不会选择任何数据，在这种情况下，应该中止复制操作。这可以通过预先查看用户选择的内容来完成：
1
2
3
4
五
6
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>document.body.addEventListener（
'mouseup'
，
function
（）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

var
 
selected = getSelectionText（）
//调用</font></font><a href="#getselectiontext"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">getSelectionText（）</font></font></a><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">以查看所选内容</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

if
（selected.length> 0）{
//如果所选文本长度大于0</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

var
 
copysuccess= copySelectionText（）
//将用户选定的文本复制到剪贴板</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

}</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

}，
false
）</font></font>

现在是现场演示的时候了。尝试选择以下段落中的任何文本，以查看其内容复制到剪贴板（之后按“Ctrl V”进行粘贴和确认）。我还添加了一个临时显示的工具提示，表示每次都成功：
演示（选择下面段落中的任何文本将其复制到剪贴板）：
“为了享受健康，为家人带来真正的幸福，为所有人带来和平，首先必须训练和控制自己的思想。如果一个人可以控制自己的思想，他就能找到通往启蒙的道路，以及所有的智慧和美德他自然会来找他。“ -佛
代码：
1
2
3
4
五
6
7
8
9
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>createtooltip（）
//通过每页调用ONCE来创建工具提示。</font><font style="vertical-align: inherit;">请参阅下面的“注释”</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

var
 
buddhaquote = document.getElementById（
'buddhaquote'
）</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

buddhaquote.addEventListener（
'mouseup'
，
function
（e）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

var
 
selected = getSelectionText（）
//调用getSelectionText（）以查看所选内容</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

if
（selected.length> 0）{
//如果所选文本长度大于0</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

var
 
copysuccess= copySelectionText（）
//将用户选定的文本复制到剪贴板</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

showtooltip（e）中</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
}</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

}，
false
）</font></font>

注意： 单击此处获取工具提示功能的来源。


将选定的表单字段值复制到用户剪贴板
继续，我们可以轻松地对表单字段值执行相同的帽子技巧。在下一个示例中，我们在INPUT文本字段旁边添加一个控件，以便用户快速复制其值：
演示：

代码：
1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
><SCRIPT></font></font><font></font>

<font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

function
 
copyfieldvalue（e，id）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

var
 
field = document.getElementById（id）</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

field.focus（）</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

field.setSelectionRange（0，field.value.length）</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

var
 
copysuccess= copySelectionText（）</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

if
（copysuccess）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

showtooltip（e）中</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

}</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

}</font></font><font></font>

<font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

</ SCRIPT></font></font><font></font>

<font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

<fieldset style =“max-width：600px”></font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

<legend>分享本教程</ legend></font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

<input id =“url”type =“text”size =“60”value =“http:
//www.javascriptkit.com/javatutors/copytoclipboard.shtml”/> </font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

<a href=
"#"
 
onClick=
"copyfieldvalue(event,'url');return false"
>复制</a></font></font><font></font><font style=
"vertical-ali
5ac
gn: inherit;"
><font style=
"vertical-align: inherit;"
>

</字段集></font></font>



将DIV的内容复制到剪贴板
最后，为了更好的衡量，我们还可以看到一个例子，点击它时自动选择并将DIV的内容复制到剪贴板：
演示（点击下面的任何引号选择其内容）：

“就在毛毛虫认为世界即将结束时，他变成了一只蝴蝶。”- 谚语
“伟大的头脑讨论想法;平均思想讨论事件;小思想讨论人。” - 埃莉诺罗斯福
“没有你的同意，任何人都不会让你感到自卑。” - 埃莉诺罗斯福

代码：
1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
三十
31
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
><div id =“motivatebox”style =“overflow：hidden; margin：1em auto”></font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

<div class =“motivate”></font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

“就在毛毛虫认为世界即将结束时，他变成了一只蝴蝶。” </font><font style=
"vertical-align: inherit;"
> - 谚语</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

</ DIV></font></font><font></font>

<font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

<div class =“motivate”></font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

“伟大的头脑讨论想法;平均思想讨论事件;小思想讨论人。” </font><font style=
"vertical-align: inherit;"
> - 埃莉诺罗斯福</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

</ DIV></font></font><font></font>

<font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

<div class =“motivate”></font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

“没有你的同意，任何人都不会让你感到自卑。” </font><font style=
"vertical-align: inherit;"
> - 埃莉诺罗斯福</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

</ DIV></font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

</ DIV></font></font><font></font>

<font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

<SCRIPT></font></font><font></font>

<font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

var
 
motivatebox = document.getElementById（
'motivatebox'
）</font></font><font></font>

<font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

motivatebox.addEventListener（
'mouseup'
，
function
（e）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

var
 
e = e || </font><font style=
"vertical-align: inherit;"
>event
//在现代和旧版IE浏览器之间均衡事件对象</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

var
 
target = e.target || </font><font style=
"vertical-align: inherit;"
>e.srcElement
//获取目标元素鼠标结束</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

if
（target.className ==
'motivate'
）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

selectElementText（target）
//选择我们想要阅读的元素文本</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

var
 
copysuccess= copySelectionText（）</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

   &nbs
334c
p;
if
（copysuccess）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

showtooltip（e）中</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

}</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

}</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

}，
false
）</font></font><font></font>

<font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>

</ SCRIPT></font></font>

这里没什么新东西 - 我们只是监视
mouseup
引号DIVs共享父容器的“ ”事件，以检测用户何时点击其中一个内部DIV。当发生这种情况时，我们选择DIV的内容，然后使用之前创建的函数将其复制到剪贴板。


结论是
正如您所看到的，阅读，更重要的是，将文本复制到剪贴板现在可以完全是JavaScript事件。随着Flash不再受浏览器和用户的青睐，这确实是个好消息。以上所有示例均适用于IE9 +，Firefox 41+和Chrome 42+。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                JavaScript
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航