首页

分享本站代码段复制按钮功能实现代码源码示例说明及效果演示

标签:代码段,复制功能,jquery,js复制按钮,示例演示     发布时间:2018-06-18   

一、前言

关于本站分享的带有源码示例的文章,在手机上选择代码复制的时候非常麻烦(需拖动滚屏复制,内容多的时候,经常需要重复操作好几次才成功)-pc相对容易(鼠标拖动选中复制),于是如下图在代码段左上方实现复制小按钮,单击可将对应代码段复制到粘贴板。

分享本站代码段复制按钮功能实现代码源码示例说明及效果演示

二、代码示例

<!DOCTYPE html>@b@<html>@b@<head>@b@<meta charset="utf-8"> @b@<link href="" rel=" rel="external nofollow" stylesheet">  @b@</head>@b@<body> @b@ <textarea id="codec"   cols="40" rows="8">@b@package test; @b@import java.io.BufferedReader;@b@import java.io.InputStreamReader;@b@import java.math.BigInteger;@b@</textarea> @b@ <button type="button"  id="copybtn">点击复制</button>@b@ <script type="text/javascript" src='http://www.xwood.net/js/jquery-1.6.2.min.js'></script>@b@ <script>@b@  $(document).ready(function(){@b@      $('#copybtn').click(function(){ @b@          var jcode=$('#codec').val();  @b@          //1.过滤有效换行处理@b@          $("#codec").val(jcode.replace(/;/g,";\r")); @b@          //2.将textarea内容选中@b@          $('#codec').trigger('select'); @b@          //3.将选择文本复制到粘贴板@b@          document.execCommand('copy'); @b@          alert('复制成功');@b@      })@b@  })@b@ </script>@b@</body>@b@</html>

三、效果演示