由于浏览器的限制,复制功能无法统一实现,如谷歌浏览器更是不支持访问系统的剪贴板。
为了在网页上实现复制功能,我从网上搜了一个方案,利用Flash来做中转,实现复制功能。步骤如下:
一、前端HTML需要复制的框,以及复制链接按钮
添加JS引用
<script type="text/javascript" src="/javascripts/jquery.zclip.min.js"></script>
添加地址框、复制按钮
<input id="url" type="text" class="form-control" style="position:relative; top:0; left:0;height:35px;" placeholder="URL" ng-model="urlAddress">
<button id='copyUrl' class="copyUrl btn" style="position:relative; top:0; left:0; height:35px;" ng-click="copyFunction()">复制链接 </button>
二、这是后台JS
<span style="white-space:pre"> </span>$(document).ready(function(){
$scope.copyFunction = function(){
$('#copyUrl').zclip({
path: '/public/javascripts/ZeroClipboard.swf',
copy: function(){
return angular.element("#url").val();
},
beforeCopy: function(){
},
afterCopy: function(){
}
});
}
});
App.directive('initzclip', function ($timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
if (scope.$last === true) {
$timeout(function() {
scope.$emit('zclipofcopy');
});
}
}
};
});