JQuery 實現複製粘貼文本
ipt.select();
選擇複製的內容(input.value)，只在input框有效javascript
document.execCommand("Copy");
執行瀏覽器複製命令css
<textarea id="ipt">待複製的內容</textarea>
文本域，input框 都支持 $('#ipt').select() || var ipt = document.getElementById('ipt') .select();html
其餘標籤好比:
<span id="ipt">789654</span>會報錯 java
<!DOCTYPE html>
<html>
<head>
<title>JQuery複製粘貼文本</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
.wrap {
width: 300px;
height: 150px;
border: 1px solid black;
margin: auto;
text-align: center;
background: linear-gradient(to right, #efac2b 0%, #fe83b0 100%);
}
.wrap .copy {
width: 150px;
height: 25px;
line-height: 25px;
border: 1px solid #ef5454;
border-radius: 10px;
margin: 16px auto;
}
input {
width: 70px;
height: 25px;
margin-left: 16px;
}
.textCode {
position: relative;
margin: 16px 0;
display: inline-block;
}
#copyBtn,
#copyBtnIos,
#copySpan {
color: black;
}
#ipt,
#iptIos,
#iptSpan {
border: 0;
outline: none;
background-color: rgba(0, 0, 0, 0);
}
/* 消息提醒 */
#message {
width: 99px;
display: none;
color: #fffefd;
font-size: 16px;
margin: auto;
text-align: center;
background: brown;
border-radius: 20px;
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<h3>安卓複製</h3>
<div class="wrap">
<span class="textCode">註冊後輸入邀請碼得到免費體驗機會</span>
<p class="copy" id="copy">
<!--<textarea id="copy">待複製的內容</textarea>-->
<input type="text" id="ipt" readonly="readonly" value="安卓688">
<span id="copyBtn">複製</span>
</p>
<!-- 消息提醒 -->
<div id='message'></div>
</div>
<br />
<br />
<br />
<h3>IOS複製</h3>
<div class="wrap">
<span class="textCode">兼容IOS複製粘貼</span>
<p class="copy" id="copyIos">
<!--<textarea id="copyIos">待複製的內容</textarea>-->
<input type="text" id="iptIos" readonly="readonly" value="ios688">
<span id="copyBtnIos">複製</span>
</p>
<!-- 消息提醒 -->
<div id='message'></div>
</div>
<br />
<br />
<br />
<h3>除input|textarea等標籤，複製</h3>
<div class="wrap">
<span class="textCode">span等標籤複製粘貼</span>
<p class="copy" id="copySpan">
<span style="cursor: pointer" onclick="" class="btnSpan" id="foo" data-clipboard-target="#foo" data-clipboard-action="copy">
span688
<span id="copyBtnSpan">複製</span>
</p>
<!-- 消息提醒 -->
<div id='message'></div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--下載clipboard.js 能夠參考http://www.clipboardjs.cn/ -->
<script src="clipboard.js"></script>
<script type="text/javascript">
//安卓
$('#copyBtn').on('click', function() {
$("#ipt").select(); //複製內容
document.execCommand("Copy"); // 執行瀏覽器複製命令
$('#message').html('複製成功');
$('#message').show();
setTimeout(function() {
$('#message').hide();
}, 3000)
})
//ios 單獨處理
function selectText(textbox, startIndex, stopIndex) {
// console.log(textbox, startIndex, stopIndex)
if(window.navigator.userAgent.toLowerCase().indexOf('iphone') !== -1) { //ios
try {
textbox.setSelectionRange(startIndex, stopIndex);
textbox.focus();
} catch(e) {
//TODO handle the exception
alert(JSON.stringify(e))
}
} else { //firefox/chrome
textbox.select();
}
}
$('#copyBtnIos').on('click', function() {
var ipt = $('#iptIos');
var len = $('#iptIos').val().length;
selectText(ipt, 0, len);
ipt.select(); //複製內容
if(document.execCommand("Copy")) {
$('#message').html('複製成功');
} else {
$('#message').html('複製失敗');
}
})
//span標籤複製粘貼
var clipboard = new ClipboardJS('.btnSpan');
clipboard.on('success', function(e) {
// console.info('Action:', e.action);
// console.info('Text:', e.text);
// console.info('Trigger:', e.trigger);
alert('複製成功');
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
})
</script>
</body>
</html>
複製代碼