<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 标签页（Tab）插件方法</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
<%--<li class="active">--%>
<%--<a href="#home" data-toggle="tab">--%>
<%--菜鸟教程--%>
<%--</a>--%>
<%--</li>--%>
<%--<li><a href="#ios" data-toggle="tab">iOS</a></li>--%>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<div>
<br>
<br>
<form action="demo-form.php">
<p>改一下输入框里的字，进入编辑富文本，再退回来，修改会保留</p >
First name: <input type="text" name="FirstName" id="textAreas" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<a href="#ios" data-toggle="tab">点击进入编辑富文本</a >
</form>
</div>
</div>
<div class="tab-pane fade" id="ios">
<div>
<p>假装这里有个富文本编辑框</p >
<a href="#home" data-toggle="tab">点击返回新建报告集</a >
</div>
</div>
<a href="javascript:;" class="cuteShareBtn" onclick="coyt()" id="copy">复制</a>
</div>
<script>
$(function () {
$('#myTab li:eq(1) a').tab('show');
});
//复制按钮事件绑定
$("#copy").on("tap",function(){
debugger
//获取input对象
var obj = document.getElementById("textAreas");
//选择当前对象
obj.select();
try{
//进行复制到剪切板
if(document.execCommand("Copy","false",obj.val())){
//如果复制成功
alert("复制成功！");
}else{
//如果复制失败
alert("复制失败！");
}
}catch(err){
//如果报错
alert("复制错误！")
}
})
function coyt(){
//获取input对象
var obj = document.getElementById("textAreas");
//选择当前对象
obj.select();
try{
//进行复制到剪切板
if(document.execCommand("Copy","false","abcd")){
//如果复制成功
alert("复制成功！");
}else{
//如果复制失败
alert("复制失败！");
}
}catch(err){
//如果报错
alert("复制错误！")
}
}
</script>
</body>
</html>
