zoukankan      html  css  js  c++  java
  • JS实现复制input中value值到剪贴板

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS实现复制input中value值到剪贴板</title>
    </head>
    
    <body>
    <button class="btn btn-success" id="create-exlink-modal-submit" type="submit">
        创建
    </button>
                        
    <div class="modal fade" id="share-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-create">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                    </button>
                    <h4 class="modal-title"> 分享文件(夹)</h4>
                </div>
                <form id="share-modal-form" method="post" class="form-horizontal" action="">
                        <!-- // modal-body begin -->
    
                        <div class="form-group">
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <input type="text" class="form-control" id="share-modal-url" name="shareModalUrl" value="" readonly style="padding-left: 5px;padding-right: 5px;"/>
                            </div>
                        </div>
    
                        <div class="form-group" style="position: absolute; left: 0; top: 0; z-index: -1000000;">
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <input type="text" class="form-control" id="share-modal-url-code" name="shareModalUrlCode" value="" readonly style="padding-left: 0;padding-right: 0;"/>
                            </div>
                        </div>
    
                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-2 control-label font-normal">提取码:</label>
                            <div class="col-lg-1 col-md-1 col-sm-1" style="padding-left: 0; padding-right: 0;">
                                <input type="text" class="form-control" id="share-modal-code" name="shareModalCode" value="" readonly style="padding-left: 2px;padding-right: 2px;"/>
                            </div>
                            <label class="col-lg-2 col-md-2 col-sm-2 control-label font-normal" style="padding-left: 0;">失效时间:</label>
                            <div class="col-lg-4 col-md-4 col-sm-4" style="padding-left:0;">
                                <input type="text" class="form-control" id="share-modal-expire-time" name="shareModalExpireTime" value="" readonly style="padding-left: 5px;padding-right: 5px;"/>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-3 align-right" style="padding-left: 0;">
                                <button class="btn btn-success" id="share-modal-copy-button" type="button" onclick="copyForClick();" style="margin-right: 20px;">
                                    复制链接及提取码
                                </button>
                            </div>
                        </div>
    
                        <!-- // modal-body end -->
                </form>
            </div><!-- /Modal -->
        </div>
    </div>
    
    <script>
    $("#create-exlink-modal-submit").click(function(e){
        e.preventDefault();
        var checkedFiles = $fileTable.bootstrapTable('getSelections');
        var len = checkedFiles.length;
        var params = JSON.stringify({file_id: checkedFiles[0].id, validity: $('input[name="createExlinkModalValidity"]:checked').val()});
        $.ajax({
            type: "POST",
            url: '/kscd/api/external-link/',
            data: params,
            timeout : 390*1000, //todo 超时(6分半钟)的话,只能认为该分片未上传过
            dataType: "json",
            contentType: 'application/json',
            success: function(data){
                if(data.ret){
                    // 获取创建的外链信息 begin
                    resetCreateExlinkModalForm();
                    $("#create-exlink-modal").modal("hide");
                    $("#share-modal").modal({
                        show: true,
                        backdrop:'static'
                    });
                    $("#share-modal-url").val(data.external_link.url);
                    $("#share-modal-expire-time").val(data.external_link.expire_time);
                    $("#share-modal-code").val(data.external_link.extract_code);
                    var url_code = "链接: " + data.external_link.url + " 提取码: " + data.external_link.extract_code;
                    var urlCode = document.getElementById("share-modal-url-code");
                    urlCode.value = url_code;
                    // 获取创建的外链信息 end
                }else{
                    toastr.error(data.msg, "错误提示");
                }
            },
            error: function(data){
                toastr.error("网络错误,创建外链失败!", "错误提示");
            }
        });
    });
    
    function copyForClick(){
        var urlCode = document.getElementById("share-modal-url-code");
        urlCode.select();
        document.execCommand("Copy");
        toastr.success("链接已经复制到剪贴板!", "信息提示");
    }
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    LeetCode 485. Max Consecutive Ones
    LeetCode 367. Valid Perfect Square
    LeetCode 375. Guess Number Higher or Lower II
    LeetCode 374. Guess Number Higher or Lower
    LeetCode Word Pattern II
    LeetCode Arranging Coins
    LeetCode 422. Valid Word Square
    Session 共享
    java NIO
    非阻塞IO
  • 原文地址:https://www.cnblogs.com/samve/p/13939312.html
Copyright © 2011-2022 走看看