js实现自动复制弹框自动消失功能

末蓝、 2023-05-29 02:41 7阅读 0赞

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

结果发现一直不能执行。  
后来发现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>
        
    
    <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>
        </div>
    </div>
    
    </body>
    </html>