JS实现一键复制、选中复制、选中多行复制
warning:
这篇文章距离上次修改已过193天,其中的内容可能已经有所变动。
在JavaScript中实现一键复制、选中复制和选中多行复制的功能,可以通过自定义函数来完成。以下是实现这些功能的示例代码:
// 一键复制整个文本内容
function copyAllText(textElementId) {
const text = document.getElementById(textElementId).value;
navigator.clipboard.writeText(text).then(function() {
console.log('复制成功');
}).catch(function(error) {
console.error('复制失败', error);
});
}
// 选中复制
function copySelectedText(textElementId) {
const textElement = document.getElementById(textElementId);
if (document.body.createTextRange) { // for IE
const range = document.body.createTextRange();
range.moveToElementText(textElement);
range.select();
} else if (window.getSelection) { // for non-IE browsers
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(textElement);
selection.removeAllRanges();
selection.addRange(range);
textElement.focus();
}
try {
document.execCommand('copy');
console.log('复制成功');
} catch (err) {
console.error('复制失败', err);
}
}
// 选中多行复制
function copyMultipleLines(textElementId) {
const textElement = document.getElementById(textElementId);
const selection = window.getSelection();
const ranges = [];
for (let i = 0; i < textElement.childNodes.length; i++) {
const childNode = textElement.childNodes[i];
if (childNode.nodeType === Node.TEXT_NODE && childNode.textContent.trim()) {
const range = document.createRange();
range.selectNode(childNode);
ranges.push(range);
}
}
selection.removeAllRanges();
ranges.forEach(range => selection.addRange(range));
try {
document.execCommand('copy');
console.log('复制成功');
} catch (err) {
console.error('复制失败', err);
}
}
在HTML中,你可以这样使用这些函数:
<!-- 一键复制 -->
<textarea id="allText">这是要复制的全文本内容</textarea>
<button onclick="copyAllText('allText')">一键复制</button>
<!-- 选中复制 -->
<span id="selectedText">这部分文本可以选中复制</span>
<button onclick="cop
评论已关闭