使用jQuery在没有Flash的情况下将文本复制到剪贴板

如果你在网上找到了一个关于如何将一段特定的文本复制到剪贴板的解决方案，最有可能的结果就是使用Flash来实现。虽然使用Flash可以很好地解决这个问题，但这不是一个明智的想法，因为这个产品最终会消失或者至少浏览器不再提供支持，所以这个解决方案没有未来。虽然可以使用jQuery或者纯JavaScript，甚至可以自己编写，但是当已经有人创建了解决方案，为什么还要再发明轮子呢？让我们看看剪贴板

Clipboard.js删除了Flash组件，优雅地解决了这个问题。它所需要做的就是引入它的脚本，给HTML标签分配一个“数据-剪贴板-目标”属性，然后编写一个简短的JavaScript片段。为了演示有一个货币转换应用程序，当您在一个文本框中输入数值时，转换结果将同时显示在另一个文本框中。当您单击文本框时，将触发一个事件将其复制到剪贴板，然后将显示一条消息。

下面是我的实现。

假设这是你的文本框。(我使用MVC框架来创建我的应用程序)

div class=' row ' div class=' col-MD-6 ' Fromdiv class=' input-group ' div class=' input-group-addon ' $/div @ Html。EditorFor(model=model。AmountFrom，new { HTMlAttributes=new { @ class=' form-control input-maximum '，@step='0.01 '，@ type=' number ' })/div/div class=' col-MD-6 ' Todiv class=' input-group ' div class=' input-group-addon ' $/divinput type=' text ' id=' AmountTo ' value=' @ Model。AmountTo ' class=' form-control input-maximum ' readonlydata-clipboard-action=' copy ' data-clipboard-target=' # AmountTo '/div/div/div你有没有注意到我有一个金额To和一个金额From，其中金额To是输入，金额from是输出，当我们点击这个的时候，它的值会传递到剪贴板？这个神奇的事情发生在属性“数据-剪贴板-目标”中。

我们还添加了一个消息框来显示复制操作消息。

div class=' row ' div class=' col-MD-6 ' br/spand=' messageBox ' class=' text-success ' style=' display : block；文本对齐：中心/span/div/div这里是你关心的HTML部分。现在让我们来看看JavaScript/jQuery部分。

script src=' http : ~/Scripts/clipboard . min . js '/scriptscriptvarclipboard=new clipboard(' # AmountTo ')；clipboard.on('success '，function(e){$('#messageBox ')。文本(' AmountSuccessfullyCopied！').显示()。fadeOut(2000年)；e . ClearSelection()；});clipboard.on('error '，function(e){$('#messageBox ')。文本(' ErrorCopyingAmount ')。显示()。fadeOut(2000年)；});$('#AmountFrom ')。单击(function(){$('#AmountFrom '))。val(“”)；});/script

在这一点上，我们会发现我们只引入了Clipboard . js如果Clipboard的实例化成功了，会给事件一些动作，否则会触发错误，对吗？这一切都很好。它兼容所有最新的浏览器。除了IE，它会给出如下消息。

如果你想看实际效果，这是一个js小提琴的例子。

下一步是从剪贴板中抓取数据，并在单击时自动粘贴到文本框中。到目前为止，浏览器似乎会因为安全风险而停止，但我会努力寻找甚至制定计划，所以每个人都必须继续关注。