<menu id="u2y6m"></menu>
<tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 溫馨提示×

    通過 js 復制隱藏域的內容

    發布時間:2020-06-30 23:11:41 來源:網絡 閱讀:668 作者:ading2016 欄目:開發技術

    1、HTML部分

    <div?class="wrapper">
    ??<h4>Click?button?below?to?copy?current?url?to?clipboard?with?hidden?input</h4>
    ??<input?type="hidden"?id="input-url"?value="Copied!">
    ??<button?class="btn-copy">Copy</button>
    </div>

    2、CSS部分

    .wrapper{
    ??width:?100%;
    ??height:?100%;
    ??text-align:?center;
    ??margin-top:10px;
    }
    .btn-copy{
    ??background-color:?#38AFDD;
    ??border:?transparent;
    ??border-bottom:?2px?solid?#0086B7;
    ??border-radius:?2px;
    ??padding:?10px;
    ??min-width:?100px;
    ??color:?#fff;
    }
    .btn-copy:hover,?.btn-copy:focus{
    ??background-color:?#48A1C1;
    ??border-bottom:?2px?solid?#38AFDD;
    ??/*transition?cross?browser*/
    ??transition:?all?.3s?ease-in;
    ??-webkit-transition:?all?.3s?ease-in;
    ??-moz-transition:all?.3s?ease-in;
    ??-o-transition:?all?.3s?ease-in;
    }
    
    3、JS部分
    var?clipboard?=?new?Clipboard('.btn-copy',?{
    ????text:?function()?{
    ????????return?document.querySelector('input[type=hidden]').value;
    ????}
    });
    clipboard.on('success',?function(e)?{
    ??alert("Copied!");
    ??e.clearSelection();
    });
    $("#input-url").val(location.href);
    //safari
    if?(navigator.vendor.indexOf("Apple")==0?&&?/\sSafari\//.test(navigator.userAgent))?{
    ???$('.btn-copy').on('click',?function()?{
    var?msg?=?window.prompt("Copy?this?link",?location.href);
    
    });
    ??}

    4、以下是我的實際實例,flask渲染表格


    {%?for?v?in?page_data.items?%}
    <tr>
    ????<td>{{?v.name?}}</td>
    ????<td>{{?v.website?}}</td>
    ????<td>{{?v.username?}}</td>
    ????<td>
    ????????<input?type="hidden"?class="form-control"?id="pwd{{?v.id?}}"?value="{{?v.pwd?}}"
    ???????????????><br>
    ????????<span>************</span>
    ????????<span><button?id="{{?v.id?}}"?class="btn?btn-copy"?value="{{?v.id?}}">復制</button></span>
    ????</td>
    ????<td>{{?v.comment?}}</td>
    ????<td>
    ????????<a?href="{{?url_for('admin.account_edit',?id=v.id)?}}"?type="submit"
    ???????????class="king-btn?king-warning">編輯</a>
    ????????<a?href="{{?url_for('admin.account_del',?id=v.id)?}}"?type="submit"
    ???????????class="king-btn?king-danger">刪除</a>
    ????</td>
    </tr>
    {%?endfor?%}
    <!--<script?src="{{?url_for('static',?filename='js/jquery.min.js')?}}"></script>-->
    <script?src="{{?url_for('static',?filename='js/clipboard.min.js')?}}"></script>
    
    <script>
    ????$(document).ready(function?()?{
    ????????$(".btn-copy").click(function?()?{
    ????????????var?val1?=?'pwd'+$(this).val();
    ????????????var?clipboard?=?new?Clipboard('.btn-copy',?{
    ????????????????text:?function?()?{
    ????????????????????return?document.getElementById(val1).value;
    
    ????????????????}
    ????????????});
    ????????????clipboard.on('success',?function?(e)?{
    ????????????????alert("復制成功!");
    ????????????????e.clearSelection();
    ????????????});
    ????????????$("#input-url").val(location.href);
    //safari
    ????????????if?(navigator.vendor.indexOf("Apple")?==?0?&&?/\sSafari\//.test(navigator.userAgent))?{
    ????????????????$('.btn-copy').on('click',?function?()?{
    ????????????????????var?msg?=?window.prompt("Copy?this?link",?location.href);
    
    ????????????????});
    ????????????}
    
    ????????})
    ????})
    
    </script>
    修改后的版本
    <script>
    ????$(document).ready(function?()?{
    ????????$(".btn-copy").click(function?()?{
    ????????????var?val1?=?'pwd'+$(this).val();
    ????????????var?val2?=?document.getElementById(val1).value;
    ????????????$.ajax({
    ????????????????url:"/admin/account/pwd/?pwd_str="?+?val2,
    ????????????????async:?false,//?這里很關鍵,不能異步操作,需要先把密碼解密后返回來才能復制到剪貼板。
    ????????????????dataType:?"text",
    ????????????????success:?function?(data)?{
    ????????????????????$("#"+val1).text(data);
    ????????????????}
    
    ????????????})
    
    ????????????var?clipboard?=?new?Clipboard('.btn-copy',?{
    ????????????????text:?function?()?{
    ????????????????????return?$("#"+val1).text();
    
    ????????????????}
    ????????????});
    ????????????clipboard.on('success',?function?(e)?{
    ????????????????alert("復制成功!");
    ????????????????e.clearSelection();
    ????????????});
    ????????????$("#input-url").val(location.href);
    //safari
    ????????????if?(navigator.vendor.indexOf("Apple")?==?0?&&?/\sSafari\//.test(navigator.userAgent))?{
    ????????????????$('.btn-copy').on('click',?function?()?{
    ????????????????????var?msg?=?window.prompt("Copy?this?link",?location.href);
    
    ????????????????});
    ????????????}
    
    ????????})
    ????})
    
    </script>

    有些clipboard.min.js 加載進來不生效,我這邊上傳一個可以用的

    https://cdn.jsdelivr.net/clipboard.js/1.5.10/clipboard.min.js



    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    免費撥打  400 100 2938 免費撥打 400 100 2938
    24小時售后技術支持 24小時售后技術支持
    返回頂部 返回頂部
    <menu id="u2y6m"></menu>
    <tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 一本久道久久综合丁香五月_免费视频禁止18以下禁止观看_日本japanese熟睡人妻_成熟闷骚女邻居引诱2