【js复制内容到剪贴板(兼容任何浏览器)】+【 tooltip() ：前端同学自定义好看的提示框】+【confirmDel()自定义删除提示框(head.jsp里)】

最新推荐文章于 2022-09-01 17:56:17 发布

互联网cjfw

最新推荐文章于 2022-09-01 17:56:17 发布

阅读量652

点赞数

分类专栏：好看提示框

本文链接：https://blog.csdn.net/qq_20597149/article/details/80625021

版权

好看提示框专栏收录该内容

1 篇文章 0 订阅

订阅专栏

====》【js复制内容到剪贴板(兼容任何浏览器)】

====test.jsp

<%--
  Created by IntelliJ IDEA.
  User: szh
  Date: 2017/11/13
  Time: 10:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>

  <%--//    ==========》双击input框，复制到剪贴板--%>
  <script type="text/javascript">
      $(function(){
          $(document).find("input[type='text']").dblclick(function () {
              copyText(this);
          });

      });

      function copyText(obj)
      {
          var Url2=obj.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';
          alert('复制成功');
      }
      function copyUrl2()
      {
          var Url2=document.getElementById("biao1").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';
          alert('复制成功');
      }
  </script>
  <div cols="20" id="biao1">12345678</div>
  <input type="button" onClick="copyUrl2()" value="点击复制代码" />
  <input type="text" onClick="copyUrl2()" value="点击复制代码"  οndblclick="" />

</html>

====项目应用实例：

加上一些判断。【放到公共页面head.jsp里。】

<%--//    ==========》双击input框，复制到剪贴板--%>
<script type="text/javascript">
    $(function(){
//        var selector = "input[type='text'][type='number']";
//        var selector = "input[type='text']";
        var selector = "input[type='text'],[type='number']";
//        var selector = "input[type='text']";
//        var selector2 = "input[type='number']";
        var selectedS = $(document).find(selector);
        selectedS.each(function () {
            $(this).dblclick(function () {
                //alert("$(this).value："+$(this).val());
                var readonly = $(this).attr("readonly");
//                alert("readonly："+readonly);
                if(readonly == undefined && $(this).val()!=""){
                    copyText($(this));
                }

            });
        })

    });

    function copyText(obj)
    {
//        var Url2=obj.innerText;
//        var Url2=obj.val();//jquery对象  //去掉所有空格。只有空格不复制。
        var text=obj.val();//jquery对象  //去掉所有空格。只有空格不复制。
//        var text2 = text.replace(" ", "");//只能替换一个空格
//        var text2 = text.replaceAll(" ", "");//报错。
        var text2 = text.replace(/ /g,'');//去掉所有空格

        if(text2==""){ //只有空格不复制。
            return false;
        }else {  //去掉所有空格。后的值。
            var oInput = document.createElement('input');
            oInput.value = text2;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = 'oInput';
            oInput.style.display='none';
    //        alert('复制成功');
            tooltip("已复制到剪贴板！");
            setTimeout(function () {
                $("#yl").hide();
            },1000);
        }
    }

</script>

===》【 tooltip() ：前端同学自定义好看的提示框】

①js

function tooltip(msg){
    $('#yl').show();
    $('#tt').html(msg);
    $('#close')[0].onclick = function(){
        $('#yl').hide();
    }
}

②页面。提示显示DIV。

<div id="yl" style="position: fixed;top:10px;left:50%;width:600px;height:270px;margin-left: -150px;border-radius: 10px;z-index:1;border:1px solid rgb(189, 178, 178);background: #fff;display:none">
            <div id="errortip"></div>
            <div id="tt" style="text-align: center;margin-top: 50px;font-size:18px;font-weight: bold"></div>
            <div id="close" class="btn btn-default btn-lg btnCustom" style="position: absolute;bottom: 10px;right:10px;cursor: pointer">关闭</div>
        </div>

====》【confirmDel()自定义删除提示框(head.jsp里)】：

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="baseResourcePath" scope="request" value="${pageContext.request.contextPath}/resource"/>
<c:set var="baseAppPath" scope="request" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title> xxx</title>
    <link href="${baseResourcePath}/css/bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" href="${baseResourcePath}/css/foundation.min.css">
    <link href="${baseResourcePath}/css/BeatPicker.min.css" rel="stylesheet" />
    <link href="${baseResourcePath}/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="${baseResourcePath}/css/fixedColumns.dataTables.min.css" rel="stylesheet" />
    <link href="${baseResourcePath}/css/view02.css" rel="stylesheet">
    <link href="${baseResourcePath}/css/common.css" rel="stylesheet" />
    <link href="${baseResourcePath}/css/icon.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="${baseResourcePath}/js/lib/html5shiv.min.js"></script>
    <script src="${baseResourcePath}/js/lib/respond.min.js"></script>
    <![endif]-->
    <%--jquery--%>
    <script src="${baseResourcePath}/js/lib/jquery.min.js"></script>
</head>
<body>
<div id="yl" style="position: fixed;top:10px;left:50%;width:600px;height:270px;margin-left: -300px;border-radius: 10px;z-index:1000000;border:1px solid rgb(189, 178, 178);background: #fff;display:none">
    <div id="errortip"></div>
    <div id="tt" style="text-align: center;margin-top: 50px;font-size:18px;font-weight: bold"></div>
    <div id="close" class="btn btn-default btn-lg btnCustom" style="position: absolute;bottom: 10px;right:10px;cursor: pointer">关闭</div>
</div>

<div id="click-confirm" style="position: fixed;top:10px;left:50%;width:600px;height:270px;margin-left: -300px;border-radius: 10px;z-index:1;border:1px solid rgb(189, 178, 178);background: #fff;display:none">
    <div style="background-image: url(/resource/images/error.png);width: 60px;height: 60px;background-repeat: no-repeat;margin: 50px 0 50px 265px;"></div>
    <div id="click-confirm-text" style="text-align: center;margin-top: 50px;font-size:18px;font-weight: bold"></div>
    <div id="click-confirm-yes" class="btn btn-default btn-lg btnCustom" style="position: absolute;bottom: 10px;right:204px;cursor: pointer">确定</div>
    <div id="click-confirm-no" class="btn btn-default btn-lg btnCustom" style="position: absolute;bottom: 10px;right:10px;cursor: pointer">取消</div>
</div>
<script>
//  =========》  提示框
    function toolComfirm(text,success,fail){
        $('#click-confirm').show();
        $('#click-confirm-text').html(text);
        function hideConfirm(){
            $('#click-confirm').hide();
        }
        document.getElementById('click-confirm-yes').onclick = function(){
            hideConfirm();
            try {
                success()
            }catch(e){}

        };
        document.getElementById('click-confirm-no').onclick = function(){
            hideConfirm()
            try {
                fail()
            }catch(e){}

        };
    }

    function confirmDel( url ) {
        toolComfirm("您确认要删除吗？",function(){
            console.log('成功');
            location.href = url;
            return true;
        },function(){
            console.log('失败')
            return false;
        });
    }

</script>

<%--//    ==========》双击input框，复制到剪贴板--%>
<script type="text/javascript">
    $(function(){
//        var selector = "input[type='text'][type='number']";
//        var selector = "input[type='text']";
        var selector = "input[type='text'],[type='number']";
//        var selector = "input[type='text']";
//        var selector2 = "input[type='number']";
        var selectedS = $(document).find(selector);
        selectedS.each(function () {
            $(this).dblclick(function () {
                //alert("$(this).value："+$(this).val());
                var readonly = $(this).attr("readonly");
//                alert("readonly："+readonly);
                if(readonly == undefined && $(this).val()!=""){
                    copyText($(this));
                }

            });
        })

    });

    function copyText(obj)
    {
//        var Url2=obj.innerText;
//        var Url2=obj.val();//jquery对象  //去掉所有空格。只有空格不复制。
        var text=obj.val();//jquery对象  //去掉所有空格。只有空格不复制。
//        var text2 = text.replace(" ", "");//只能替换一个空格
//        var text2 = text.replaceAll(" ", "");//报错。
        var text2 = text.replace(/ /g,'');//去掉所有空格

        if(text2==""){ //只有空格不复制。
            return false;
        }else {  //去掉所有空格。后的值。
            var oInput = document.createElement('input');
            oInput.value = text2;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = 'oInput';
            oInput.style.display='none';
    //        alert('复制成功');
            tooltip("已复制到剪贴板！");
            setTimeout(function () {
                $("#yl").hide();
            },1000);
        }
    }

</script>

互联网cjfw

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【js复制内容到剪贴板(兼容任何浏览器)】+【 tooltip() ：前端同学自定义好看的提示框】+【confirmDel()自定义删除提示框(head.jsp里)】

js复制内容到剪贴板。====test.jsp&lt;%-- Created by IntelliJ IDEA. User: szh Date: 2017/11/13 Time: 10:41 To change this template use File | Settings | File Templates.--%&gt;&lt;%@ page contentType=...
复制链接

扫一扫