HTML中的复制按钮

-1

我正在尝试设置复制文本按钮，但是我希望文本的复制不会显示，因此它在页面上占用的空间更少。我基本上只想得到一个复制文本按钮，但文本不会显示在任何地方。我该如何去做这件事。HTML中的复制按钮

<SPAN ID="copytext" STYLE="height:150;width:162;background-color:pink"> 
Copy Text 
</SPAN> 
<TEXTAREA ID="holdtext" STYLE="display:none;"> 
</TEXTAREA> 
<BUTTON onClick="ClipBoard();">Copy to Clipboard</BUTTON> 

<SCRIPT LANGUAGE="JavaScript"> 

function ClipBoard() 
{ 
holdtext.innerText = copytext.innerText; 
Copied = holdtext.createTextRange(); 
Copied.execCommand("Copy"); 
} 

</SCRIPT>

来源

2017-07-11 Tacoma

不使用web开发帽...不使用内联的CSS/JS，因为这是不好的做法，并导致硬在那里它被复制到的位置维护代码，也没有必要的语言，因为html5是一件事，也缩进你的代码，行业标准是4空格或1制表符相当于4空间:) – ThisGuyHasTwoThumbs

为什么不只是将文本存储在变量中你的脚本？ –

@NathanArthur因为那么数据不会在剪贴板上？ –

-1

这是我如何解决我的问题。

<script> 
    var bccList = 'emails here'; 
    function SetList() 
    { 


    window.clipboardData.setData('text', bccList); 
    } 
    </script>

然后在我做onclick="javascript:SetList()

来源

2017-09-24 15:13:22 Tacoma

您不能从未显示的元素复制内容。但是，将支架从文档流中拉出（因此它不会更改页面上其余元素的布局），然后将其更改为透明将会起作用，因为即使opacity为0，元素为仍然被认为是可见的（去图！）。

你也需要小心，因为不是所有的浏览器都支持.execCommand()，如果他们不这样做，他们会抛出错误，所以try/catch是保证。

var input = document.getElementById("data"); 
 
var temp = document.getElementById("temp"); 
 

 
// Add copy click event handler to the body so that anytime a copy operation occurs 
 
// our event handler will fire 
 
document.body.addEventListener('click', copy); 
 

 
// event handler will recieve argument referencing the event itself 
 
function copy(e) { 
 
    // copy data to placeholder - Don't use .innerText, use .textContent 
 
    temp.value = data.textContent; 
 

 
    // is element selectable? 
 
    if (temp.select) { 
 

 
    // select text 
 
    temp.select(); 
 
    
 
    // Not all browsers implement execCommand and, if they don't, 
 
    // an error will be thrown. 
 
    try { 
 
     // copy text 
 
     document.execCommand('copy'); 
 
    } catch (err) { 
 
     alert('please press Ctrl/Cmd+C to copy manually'); 
 
    } 
 

 
    } 
 

 
}

#temp { 
 
    position:absolute; 
 
    opacity:0; 
 
} 
 
#copytext { 
 
    height:150;width:162;background-color:pink 
 
}

<input type="text" id="temp"> 
 
<p id="data">data to copy<p> 
 
<button>Copy</button>

*此溶液改编自here。

来源

2017-07-11 16:43:29

HTML中的复制按钮

回答

相关问题