参考
可以使用document.execCommand的copy
命令
// aCommandName: 命令
// aShowDefaultUI: 是否展示用户界面,一般为 false
// aValueArgument :一些命令(例如insertImage)需要额外的参数(insertImage需要提供插入image的url),默认为null
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
这里使用 document.execCommand("Copy","false",null)
执行浏览器复制命令,要想复制到剪切板,必须先选中这段文字,input
自带的select()
方法在苹果端无法进行选择,所以要自己去写一个类似的方法
<!DOCTYPE html>
<html>
<head>
<title>复制到剪切板</title>
</head>
<body>
<input type="text" name="copyInput" id="copyInput">
<button type="button" onclick="copy('copyInput')">复制</button>
<script type="text/javascript">
function copy(id){
var $copy = document.getElementById(id)
var $value = $copy.value;
var valueLength = $value.length;
selectText($copy, 0, valueLength);
document.execCommand('copy','false',null)
alert('已复制,可以分享给朋友啦,试试看。');
}
function selectText(dom, startIndex, endIndex){
if(dom.setSelectionRange){
dom.focus();
dom.setSelectionRange(startIndex, endIndex)
}else if(dom.createTextRange){
var range = dom.createTextRange()
range.collapse(true)
range.moveStart('character', startIndex)
range.moveEnd('character', endIndex - startIndex)
range.select()
}else{
alert('您的浏览器太老啦!')
}
}
</script>
</body>
</html>
HTMLInputElement.setSelectionRange():可以从一个被 focused 的 <input>
元素中选中特定范围的内容。