有个需求，下拉框选中后自动获取下拉框内的值，即自动复制功能
所以会用到document.execCommand("Copy")这个功能，但是需要先执行select，才能copy，所以想到用input type=hidden先保存值，然后再copy。
jsp代码如下：
面板：
<select id="boardUrl" name="boardUrl" style="width: 150px">
<c:forEach var="board" items="${boards}" varStatus="keyIndex">
<option value="${board.absoluteUrl}">${board.boardName}</option>
</c:forEach>
</select>
URL:
<input type="text" id="boardUrlStr" style="width: 450px;display: none" name="boardUrlStr" value=""/>
事件绑定：
$("#boardUrl").on("change", copyBoardUrl);
copyBoardUrl函数内容：
function setBoardUrl(){
// 选择当前对象,因为下来框不能执行select，所以先存入hidden中
var absoluteUrl=$("#boardUrl").val(); //多选,获取object
$("#boardUrlStr").attr("value",absoluteUrl);
//获取input对象
var obj = document.getElementById("boardUrlStr");
var value = $(obj).attr("value");
obj.select();
var b = document.execCommand("Copy");
if(b){
//如果复制成功
alert("复制成功！");
}else{
//如果复制失败
alert("复制失败！");
}
}
结果发现一直不能执行。
后来发现input的type=hidden 或display=none都会导致失败，因为无法选中
<a href="javascript:;" class="cuteShareBtn" οnclick="copyUrl()" id="copy"><button class="btn" type="" οnclick="">复制URL</button></a>
这种execcommand也不行，因为包含了跳转和按钮点击两个事件，copy会失败，可以修改为：
<a href="javascript:;" class="cuteShareBtn" οnclick="coyt()" id="copy">复制</a>或
<button class="btn" type="" οnclick="copyUrl()">复制URL</button>
正确实例：
<!DOCTYPE html>
<html>
<head>
<title>面板地址簿</title>
<meta charset="utf-8">
<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>
<script type="text/javascript">
function copyUrl2(data)
{
var id = data.id;
var Url2=document.getElementById(id+"url").innerText;
var oInput = document.createElement('input');
oInput.value = Url2;
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
oInput.className = 'oInput';
oInput.style.display='none';
alert2();
}
function alert2()
{
$('#myModal').modal('show');
setTimeout(function(){$('#myModal').modal('hide');},800);
}
</script>
<body>
<div class="col-md-12">
<br>
<br>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
面板地址簿 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a><p onClick="copyUrl2(this)" id="biao1">面板1</p></a></li>
<li><a><p onClick="copyUrl2(this)" id="biao2">面板2</p></a></li>
<li><a><p onClick="copyUrl2(this)" id="biao3">面板3</p></a></li>
</ul>
</div>
<br>
<br>
<p>URL：<input type="text" name="FirstName" placeholder="复制到这里试试"></p>
</div>
<p style="display:none;" cols="20" id="biao1url">www.面板1的地址.com</p>
<p style="display:none;" cols="20" id="biao2url">www.面板2的地址.com</p>
<p style="display:none;" cols="20" id="biao3url">www.面板3的地址.com</p>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
面板地址已复制到剪贴板！
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
