在现代的Web开发中，数据复制功能是用户交互中一个非常常见的需求。传统的实现方式可能会依赖于Flash，但随着技术的发展，Flash已经不再是一个可靠的选择，因为未来的浏览器将不再支持它。因此，寻找一个更现代、更兼容未来浏览器的解决方案变得尤为重要。
幸运的是，可以使用jQuery或纯JavaScript来实现这一功能，而不必重新发明轮子。有人已经为提供了解决方案，比如Clipboard.js。这个库优雅地解决了问题，而不需要依赖Flash组件。只需要引入这个脚本，为HTML标签添加一个“data-clipboard-target”属性，并编写一小段JavaScript代码即可。
假设有一个应用程序，它通过在文本框中输入值来转换货币，转换率会显示在另一个文本框中。当点击这个文本框时，它的值将被复制到剪贴板，并显示一个消息表示事件已发生。以下是如何实现它的示例。
首先，定义HTML结构。假设使用MVC模式创建了应用程序：
<div class="row">
<div class="col-md-6">
From
<div class="input-group">
<div class="input-group-addon">$
</div>
@Html.EditorFor(model => model.AmountFrom, new { htmlAttributes = new { @class = "form-control input-largest", @step = "0.01", @type = "number" } })
</div>
</div>
<div class="col-md-6">
To
<div class="input-group">
<div class="input-group-addon">$
</div>
<input type="text" id="AmountTo" value="@Model.AmountTo" class="form-control input-largest" readonly data-clipboard-action="copy" data-clipboard-target="#AmountTo" />
</div>
</div>
</div>
如所见，有AmountTo和AmountFrom，AmountTo是输入，而AmountFrom是输出，当点击它时，值将被传递到剪贴板。这里的魔法发生在名为“data-clipboard-target”的属性上。
还将添加一个消息框，用于显示复制操作的消息：
<div class="row">
<div class="col-md-6">
<br />
<span id="messageBox" class="text-success" style="display: block; text-align: center">
</span>
</div>
</div>
接下来，进入JavaScript/jQuery部分。首先，需要引入Clipboard.js库：
<script src="~/Scripts/clipboard.min.js"></script>
然后，实例化Clipboard并为成功和错误事件分配动作：
<script>
var clipboard = new Clipboard('#AmountTo');
clipboard.on('success', function(e) {
$("#messageBox").text("Amount Successfully Copied!").show().fadeOut(2000);
e.clearSelection();
});
clipboard.on('error', function(e) {
$("#messageBox").text("Error Copying Amount").show().fadeOut(2000);
});
$('#AmountFrom').click(function() {
$('#AmountFrom').val("");
});
</script>
如所见，只是引入了Clipboard.js，实例化了Clipboard，然后为成功和错误事件分配了动作。简单吧？这种方法的好处是它在所有最新的浏览器上都能工作，但再次提醒，对于Internet Explorer，它会显示这样的消息：
如果想要看到这个功能的实际效果，这里有一个。