有个需求，下拉框选中后自动获取下拉框内的值，即自动复制功能 所以会用到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>
