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>
    

      

  • 相关阅读:
    mysql远程执行sql脚本
    数据库死锁
    sqlserver 数据库之调优
    sqlserver 数据库之性能优化
    Session共享的解决办法
    关于对session机制的理解--通俗易懂
    kafka之常用命令
    分布式消息队列之kafka
    vuejs调试代码
    json
  • 原文地址:https://www.cnblogs.com/samve/p/13939312.html
Copyright © 2011-2022 走看看