如何在前端代码中实现便捷的复制功能？
- 内容介绍
- 文章标签
- 相关推荐
本文共计707个文字，预计阅读时间需要3分钟。
前情+在前端开发需求中，为了方便用户使用，经常需要通过点击按钮复制指定内容。相关API：Document.createRange() 返回一个Range对象，通过Range对象可以选择中文文本。// 选中文本id为tes
前情在前端开发需求中，为了方便用户使用，经常需要通过点击按钮复制指定的某一段内容。
相关APIDocument.createRange()
返回一个Renge对象，通过Range对象可以选中文本。
// 选中id为test的元素的内容
const range = document.createRange();
range.selectNode(document.getElementById('test'));
const selection = window.getSelection();
if (selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
Window.getSelection
返回一个Selection对象，表示用户选择的文本范围或光标的当前位置。
const selection = window.getSelection();
const selectedText = selection.toString(); // 获取当前选中的文本
console.log(selectedText)
document.execCommand
document暴露execCommand方法，该方法允许运行命令来操纵可编辑内容区域的元素
// const bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);
const bool = document.execCommand('copy'); // 执行复制命令
参数说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="text" id="testInput" value="testInput">
<div id="testDiv">testdiv</div>
<button id="copyTestInput">复制输入框内容</button>
<button id="copyTestDiv">复制div文本内容</button>
<script>
/*
* 复制输入框内容
*/
function copyInput() {
var copyVal = document.querySelector("#testInput");
copyVal.select();
return document.execCommand('copy');
}
/*
* 复制元素节点的内容
*/
function copyDiv() {
var range = document.createRange();
range.selectNode(document.querySelector('#testDiv'));
var selection = window.getSelection();
if (selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
return document.execCommand('copy');
}
/*
* 提示
* param {Boolean} status
*/
function tips(status) {
if (status) {
alert('复制内容成功');
} else {
alert('复制失败，可选中内容手动复制');
}
}
document.querySelector('#copyTestInput').addEventListener('click', function() {
var isCopyed = copyInput();
tips(isCopyed);
}, false);
document.querySelector('#copyTestDiv').addEventListener('click', function() {
var isCopyed = copyDiv();
tips(isCopyed);
}, false);
</script>
</body>
</html>
- 如果是输入类型元素：直接调用select方法选中内容，再启动copy命令
- 如果是普通元素 ：需要通过document.createRange选中节点内容，再通过window.getSelection选中元素内容，再启动copy命令
测试地址：jsbin.com/qobutuhidu/1/edit?html,js,output
注意input输入类型的元素
- 不能有disabled属性
- width || height 不能为0
- 不能有hidden、display:none属性
普通类型元素
- width || height 不能为0
- 不能有display:none属性
本文共计707个文字，预计阅读时间需要3分钟。
前情+在前端开发需求中，为了方便用户使用，经常需要通过点击按钮复制指定内容。相关API：Document.createRange() 返回一个Range对象，通过Range对象可以选择中文文本。// 选中文本id为tes
前情在前端开发需求中，为了方便用户使用，经常需要通过点击按钮复制指定的某一段内容。
相关APIDocument.createRange()
返回一个Renge对象，通过Range对象可以选中文本。
// 选中id为test的元素的内容
const range = document.createRange();
range.selectNode(document.getElementById('test'));
const selection = window.getSelection();
if (selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
Window.getSelection
返回一个Selection对象，表示用户选择的文本范围或光标的当前位置。
const selection = window.getSelection();
const selectedText = selection.toString(); // 获取当前选中的文本
console.log(selectedText)
document.execCommand
document暴露execCommand方法，该方法允许运行命令来操纵可编辑内容区域的元素
// const bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);
const bool = document.execCommand('copy'); // 执行复制命令
参数说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="text" id="testInput" value="testInput">
<div id="testDiv">testdiv</div>
<button id="copyTestInput">复制输入框内容</button>
<button id="copyTestDiv">复制div文本内容</button>
<script>
/*
* 复制输入框内容
*/
function copyInput() {
var copyVal = document.querySelector("#testInput");
copyVal.select();
return document.execCommand('copy');
}
/*
* 复制元素节点的内容
*/
function copyDiv() {
var range = document.createRange();
range.selectNode(document.querySelector('#testDiv'));
var selection = window.getSelection();
if (selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
return document.execCommand('copy');
}
/*
* 提示
* param {Boolean} status
*/
function tips(status) {
if (status) {
alert('复制内容成功');
} else {
alert('复制失败，可选中内容手动复制');
}
}
document.querySelector('#copyTestInput').addEventListener('click', function() {
var isCopyed = copyInput();
tips(isCopyed);
}, false);
document.querySelector('#copyTestDiv').addEventListener('click', function() {
var isCopyed = copyDiv();
tips(isCopyed);
}, false);
</script>
</body>
</html>
- 如果是输入类型元素：直接调用select方法选中内容，再启动copy命令
- 如果是普通元素 ：需要通过document.createRange选中节点内容，再通过window.getSelection选中元素内容，再启动copy命令
测试地址：jsbin.com/qobutuhidu/1/edit?html,js,output
注意input输入类型的元素
- 不能有disabled属性
- width || height 不能为0
- 不能有hidden、display:none属性
普通类型元素
- width || height 不能为0
- 不能有display:none属性