【js複製內容到剪貼簿(相容任何瀏覽器)】+【 tooltip() ：前端同學 自定義 好看的提示框】+【confirmDel()自定義刪除提示框(head.jsp裡)】
阿新 • • 發佈：2019-02-03
====》【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="點選複製程式碼" ondblclick="" /> </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>