javascript - 使用 execCommand (Javascript) 将隐藏文本复制到剪贴板

标签 javascript jquery html clipboard

我正在尝试不使用 Flash 复制到剪贴板,我计划使用 ZeroClipboard 返回到 Flash如果浏览器与 javascript 方法不兼容。

我有一个按钮的 onClick 监听器,如下所示:

$(buttonWhereActionWillBeTriggered).click(function(){ 
    var copyDiv = document.getElementById(inputContainingTextToBeCopied);
    copyDiv.focus();
    document.execCommand('SelectAll');
    document.execCommand("Copy", false, null);
}

和一个输入字段如下:

<input type="text" name="Element To Be Copied" id="inputContainingTextToBeCopied" value="foo"/>

这目前按预期工作,但设计要求包含要复制的文本的字段是不可见的。我已经尝试设置 type="hidden"style="display: none" 都没有成功。两者都会导致按钮选择整个页面并将整个内容复制到用户的剪贴板。
我相对确信原因不是基于浏览器,但以防万一,我正在 Mac OS X 10.10.4 上的 Chrome(版本 43.0.2357.134(64 位))上进行测试。

有没有一种方法可以在隐藏 <input> 时保持其可见的功能?或者如果不是我可以选择的替代路线?


我知道类似的问题,但没有一个能解决我的问题,要么是太老了,要么没有真正使用 Javascript,要么不适合特定的场景。 Here's a good answer对于任何有类似的、不太具体的问题的人。

最佳答案

这是我不使用 jQuery 的解决方案:

function setClipboard(value) {
    var tempInput = document.createElement("input");
    tempInput.style = "position: absolute; left: -1000px; top: -1000px";
    tempInput.value = value;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);
}
<!DOCTYPE html>
<html>
<head>
<title>Set Clipboard</title>
</head>
<body>
    <button onclick="setClipboard('foo loves bar')">Set Clipboard</button>
</body>
</html>

关于javascript - 使用 execCommand (Javascript) 将隐藏文本复制到剪贴板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31593297/

相关文章:

javascript - JSON 解析错误 : unexpected end of data at line 1 column 1 of the JSON data

javascript - 将 html 更改为数组中的下一项 - jquery

javascript - 背景图像 div 周围不需要的边框

html - 你如何使一个div中的文本环绕另一个带有img和文本的div

javascript - 如何使用 URL 重写在 javascript 中访问 REAL querystring 参数

javascript - 定义的所有变量的 Typescript 通用类型

javascript - Highcharts xAxis 类别未正确显示

javascript - HTML 可选择表格,具有编辑/删除/查看选项

javascript - Fullcalendar 在拖放时复制事件

html - 在页面中间对齐内容