js 复制粘贴 js 复制 select() 打印 找不到 未定义

119 阅读1分钟

注意 input框 type 属性不能 设置为 hidden 隐藏  否则  select()  无效 找不到对应内容

	
<input   id="copyInput_1" value="复制内容"  style="position: absolute;left:-100px;bottom:-100px;opacity:0;">
			<button onclick='doCopy("复制内容","copyInput_1")' id="copyBtn" >一键复制</button>



// jq

function doCopy(value,id) {

		console.log($('#'+id).select())
		console.log(value)
		const input = $('#'+id)
		input.value = value
		$('#'+id).select()
		document.execCommand('Copy');

	}


// js原生 

	function doCopy(value,id) {

		const input = document.querySelector('#'+id);
		input.value = value;
		input.select();
		document.execCommand('Copy');

		console.log('复制成功');

	}

推荐使用 clipboard 

官网地址 clipboardjs.com/

在线地址

jsDelivr

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

cdnjs

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

RawGit (Deprecated - Use is not recommended)

<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.8/dist/clipboard.min.js"></script>

GitHack (Based on RawGit)

<script src="https://rawcdn.githack.com/zenorocha/clipboard.js/v2.0.8/dist/clipboard.min.js"></script>

unpkg

<script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>

Statically

<script src="https://cdn.statically.io/gh/zenorocha/clipboard.js/v2.0.8/dist/clipboard.min.js"></script>
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>


<script>

    var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

</script>