我的脚本中有一个函数会出错。功能目的是使用 onClick 事件从静态面板(不是文本框或输入)复制文本。
Uncaught TypeError: copyText.select is not a function
我想要的是让用户能够单击文本并将其复制到他的剪贴板。
也许您可以提供更好的功能?
https://codepen.io/abooo/pen/jYMMMN?editors=1010
function myFunction() {
var copyText = document.getElementById("display");
copyText.select();
document.execCommand("Copy");
alert("Copied the text: " + copyText.value);
}
来自 w3schools
您可以使用大多数现代浏览器都支持的新的Clipboard API writeText 方法(有关详细信息,请参阅我可以使用)。
//If you want to copyText from Element
function copyTextFromElement(elementID) {
let element = document.getElementById(elementID); //select the element
let elementText = element.textContent; //get the text content from the element
copyText(elementText); //use the copyText function below
}
//If you only want to put some Text in the Clipboard just use this function
// and pass the string to copied as the argument.
function copyText(text) {
navigator.clipboard.writeText(text);
}
<div id="mytext">This is some text that needs to be copied</div>
<button onclick="copyTextFromElement('mytext')">Copy</button>
这将允许您复制元素的文本。虽然我没有用复杂的布局测试它。
如果您想使用它,请删除警报并提供更好的方式让用户知道内容已被复制。
SAFARI:这在 10.0 版之前的 Safari 上不起作用。但从 Safari 10.0 开始,这现在有效。
function copyText(element) {
var range, selection, worked;
if (document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}
try {
document.execCommand('copy');
alert('text copied');
}
catch (err) {
alert('unable to copy text');
}
}
<h1 id='display' onClick='copyText(this)'>Text Sample</h1>
如果您想在
<input>
或 <textarea>
元素上使用它,请告诉我代码不同。
try/catch 适用于会抛出异常的旧版本 Safari。因此,如果您不打算在 10.0 版本之前支持 Safari,那么您可以将其删除。
Intervalia 的出色回答。
对它的小改进,有时单击的元素不是您要复制的元素。
所以我建议你传递你要复制的元素的id。
<button onClick='copyText("display")'> Copy </button>
<h1 id='display'> Text Sample </h1>
然后,在函数的第一行做
element = document.getElementById(element);
差别不大,但我认为这样更有用。
select()
方法用于选择文本字段的内容。它不适用于h1
元素。
hi 所以我调查了一下,因为你没有使用 textInput 你不能只使用
.select()
功能。我从 stack overflow 开发人员 Jason 那里借用了一些关于如何在 javaScript 中突出显示项目的代码
function selectedText(element)(){
var doc = document,
text = doc.getElementById(element)
range, selection;
if(doc.body.createTextRange){
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
}
else if(window.getSelection){
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
return range;
然后我修改它以返回范围。 有了这些,你所要做的就是
document.onclick = function(e){
if(e.target.className === 'click'){
var copytext = SelectText('display');
document.execCommand("copy");
alert("Copied the text: " + copytext);
}
}
这里的关键部分是传递给
.execCommand() is lower case 'copy'
的字符串
我正在用这个。这与其他答案类似,但似乎在 Chrome 中有效。
function CopyToClipBoard(textToCopy) {
var successMessage = 'Success! The text was copied to your clipboard';
var errorMessage = 'Oops! Copy to clipboard failed. ';
// navigator clipboard api needs a secure context (https)
if (navigator.clipboard && window.isSecureContext) {
// navigator clipboard api method'
navigator.clipboard.writeText(textToCopy).then(
function () {
/* clipboard successfully set */
console.log(successMessage)
},
function () {
/* clipboard write failed */
console.warn(errorMessage)
}
)
} else
if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
// text area method
var textarea = document.createElement("textarea");
textarea.value = textarea.textContent = textToCopy;
textarea.style.opacity = "0";
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
var selection = document.getSelection();
var range = document.createRange();
range.selectNode(textarea);
selection.removeAllRanges();
selection.addRange(range);
try {
var successful = document.execCommand('copy'); // Security exception may be thrown by some browsers.
var msg = successful ? console.log(successMessage) : console.warn(errorMessage);
}
catch (ex) {
console.warn(errorMessage, ex);
}
finally {
selection.removeAllRanges();
document.body.removeChild(textarea);
}
}