JS实现一键复制、选中复制、选中多行复制

JS实现一键复制

首先我们准备一份通用的一键复制代码：

export function copyTextFun(text) {if (!text) return falsevar textarea = document.createElement('textarea') textarea.value = text document.body.appendChild(textarea) textarea.select() message.destroy()try {var successful = document.execCommand('copy') if (successful) {console.log('成功')} else {console.log('失败')}} catch (err) {console.log('失败')} finally {document.body.removeChild(textarea) }
}

上面的方法就是传入文字，然后就可以实现复制，我们当然可以改造一下，改造成传入一个textarea元素，进入自动获取值，但是这个我们需要改造成获取textarea点击之后的事件对象，我们从中得到当前输入的值。

export function copyText(text) {if (!text) return falselet newText = ''if (typeof text !== 'string') {newText = (text && text.target && text.target.value) || ''} else {newText = text}var textarea = document.createElement('textarea') //创建临时的textarea元素textarea.value = newText //将要复制的内容赋值给textareadocument.body.appendChild(textarea) //将textarea添加到页面上textarea.select() //选中textarea中的内容message.destroy()try {var successful = document.execCommand('copy') //执行复制命令if (successful) {message.success('成功复制！')} else {message.error('无法复制！')}} catch (err) {message.error('无法复制！')} finally {document.body.removeChild(textarea) //移除临时的textarea元素}
}

message方法是使用的antd的组件，你们可以换成你们自己的提示组件。
使用很简单：

<TextArea onClick={copyText} readOnly rows={2} placeholder="请输入" />

这个时候我们已经可以实现点击复制当前文本框的内容，并提醒复制成功的消息弹窗。
但是我们还是不满足，有时候我们会自己想选择行的复制，拖黑选中的文字进行复制。

选中复制、选中多行复制

function getSelectedText() {let selectedText = ''if (window.getSelection) {// 检查浏览器是否支持 window.getSelection()selectedText = window.getSelection().toString() // 获取选中的文本并转换为字符串} else if (document.selection && document.selection.type !== 'Control') {selectedText = document.selection.createRange().text}return selectedText
}
export function copyText(text) {if (!text) return falselet newText = ''if (typeof text !== 'string') {newText = (text && text.target && text.target.value) || ''if (!newText) return falseconst newGetSelectedText = getSelectedText()// 如果选中的文字在当前输入框中 直接复制当前选中的文字if (newGetSelectedText && newGetSelectedText.trim() && newText.includes(newGetSelectedText)) {newText = newGetSelectedText}} else {newText = text}var textarea = document.createElement('textarea') //创建临时的textarea元素textarea.value = newText //将要复制的内容赋值给textareadocument.body.appendChild(textarea) //将textarea添加到页面上textarea.select() //选中textarea中的内容message.destroy()try {var successful = document.execCommand('copy') //执行复制命令if (successful) {message.success('成功复制！')} else {message.error('无法复制！')}} catch (err) {message.error('无法复制！')} finally {document.body.removeChild(textarea) //移除临时的textarea元素}
}