您现在的位置是:网站首页 > 心得笔记
一键复制
简介因为项目需要多个地方用到复制功能,但又没有必要再引入一个插件,于是在网上找到了一键复制的源码,特此记录
1、html
<h4>一键复制指定元素或文本信息,兼容安卓和iOS</h4> <p> 电话号码: <span id="textBox">13899888899</span> <button id="copy1">复制电话号码</button> </p> <p> <button id="copy2">点击复制返回文本</button> </p>
2、js
var copy1 = document.getElementById('copy1'); var copy2 = document.getElementById('copy2'); var textBox = document.getElementById('textBox'); copy1.onclick = function() { copyText(textBox); } copy2.onclick = function() { copyText('电话号码:' + textBox.innerHTML); } /**复制文本 */ function copyText(node) { if (!node) { return; } var result; // 将复制内容添加到临时textarea元素中 var tempTextarea = document.createElement('textarea'); document.body.appendChild(tempTextarea); if (typeof(node) == 'object') { // 复制节点中内容 // 是否表单 if (node.value) { tempTextarea.value = node.value; } else { tempTextarea.value = node.innerHTML; } } else { // 直接复制文本 tempTextarea.value = node; } // 判断设备 var u = navigator.userAgent; if (u.match(/(iPhone|iPod|iPad);?/i)) { // iOS // 移除已选择的元素 window.getSelection().removeAllRanges(); // 创建一个Range对象 var range = document.createRange(); // 选中 range.selectNode(tempTextarea); // 执行选中元素 window.getSelection().addRange(range); // 复制 result = document.execCommand('copy'); // 移除选中元素 window.getSelection().removeAllRanges(); } else { // 选中 tempTextarea.select(); // 复制 result = document.execCommand('Copy'); } // 移除临时文本域 document.body.removeChild(tempTextarea); if (result) { alert('复制成功', { removeTime: 1000 }) } else { alert('复制失败', { removeTime: 1000 }) } return result; }