JavaScript execCommand（'copy'）不起作用 [英] JavaScript execCommand('copy') not working
问题描述
我无法使用execCommand（'copy'），尝试复制在多选选项中选择的值。我在temp中获得了价值，但是临时没有复制或进入剪贴板的价值。
{
$ propArr = array_unique（$ properties）;
echo< div class ='table-responsive'>;
echo< table class ='bordered'>;
foreach（$ propArr as $ keyProp => $ val）{
echo< tr>;
echo< td> $ val< / td>< td>;
echo< select name ='propval'id ='propval'onclick ='showpropval（this.value）;'class ='form-control'multi>;
foreach（$ value为$ k => $ v）{
if（$ val == $ k）{
foreach（$ v as $ kv => $ fval）{
echo< option value ='$ fval'> $ fval< / option>;
}
}
}
echo< / select>;
echo< / td>;
echo< / tr>;
}
echo< / table>;
echo< / div>;
}
< script>
函数showpropval（val）
{
var temp = val;
temp.execCommand（copy）;
}
< / script>
我知道你的意图如下：你想要的选择后立即将所选选项的值复制到剪贴板。
当您使用 document.execCommand（'copy'）时，您复制页面上选择的任何内容（例如段落中的内容或输入字段本身）。
然而，捕捉是选择< select> 中的选项不被视为选定文字。更糟糕的是，如果您想通过javascript触发选择文本，则存在一些限制：您只能调用< input> 或< textarea> 。select（） c $ c> element。
以下是我要做的事情：将所选选项复制到单独的（不可见）输入字段，选择它并从中复制内容这是一个可以作为演示的小提琴： https://jsfiddle.net/Zomry/metcfvcq/13/
我将在此处分解：
首先，将此元素添加到页面中。这是输入字段，我们将内容从剪贴板复制到剪贴板。请注意，我添加了tabindex -1，因此您无法通过Tab键访问它。我还包括了aria-hidden所以屏幕阅读器知道它应该忽略这一点。
< input class ='copyfrom'tabindex =' - 1'arian-hidden ='true'>
然后通过将输入字段设置为不可见来使输入字段不可见（如果我尝试显示不起作用：无效;或其他技巧）
< style>
.copyfrom {
position：absolute;剩余
：-9999px;
}
< / style>
然后将值复制到输入字段，选择并复制。
var input = document.querySelector（input.copyfrom）; //选择输入字段
function showpropval（val）{
var selectedValues = getSelectValues（this）; //获取选定的值
input.value = test.join（'，'）; //将它们加入逗号分隔列表
input.select（）; //选择屏幕外输入文字
document.execCommand（copy）; //复制它
this.focus（）; //重点关注原创，所以我们看不到任何故障
}
//学分：https：//stackoverflow.com/questions/5866169/how-to-get -all-selected-a-multiple-select-box
函数getSelectValues（select）{
var result = [];
var options = select&& select.options;
var opt;
for（var i = 0，iLen = options.length; i< iLen; i ++）{
opt = options [i];
if（opt.selected）{
result.push（opt.value || opt.text）;
}
}
返回结果;
}
I am unable to use the execCommand('copy'), trying to copy value which is selected in multi-select option. iam getting value in "temp" but the value which is getting in temp not copying or getting in clipboard.
{
$propArr=array_unique($properties);
echo "<div class='table-responsive'>";
echo "<table class='bordered'>";
foreach($propArr as $keyProp =>$val){
echo "<tr>";
echo "<td>$val</td><td>";
echo "<select name='propval' id='propval' onclick='showpropval(this.value);' class='form-control' multiple>";
foreach($values as $k => $v){
if($val==$k){
foreach($v as $kv =>$fval){
echo "<option value='$fval'>$fval</option>";
}
}
}
echo "</select>";
echo"</td>";
echo "</tr>";
}
echo "</table>";
echo "</div>";
}
<script>
function showpropval(val)
{
var temp = val;
temp.execCommand("copy");
}
</script>
I understand that your intention is the following: you want to copy the values of the selected options to the clipboard as soon as you select it.
When you use document.execCommand('copy'), you copy whatever is selected on the page (such as content in a paragraph or in an input field itself).
The catch is however that selecting options in <select> is not considered to be selected text. Worse yet, if you would like to trigger selecting text via javascript, there are some restrictions: you can only call .select() on an <input>or a <textarea> element.
Here is what I would do: copy the selected options to a separate (not visible) input-field, select it and copy the content from that.
Here is a fiddle that can serve as a demo: https://jsfiddle.net/Zomry/metcfvcq/13/
I wil break it down here:
First, add this element to the page. This is the input-field where we will copy the content from to the clipboard. Note that I have added tabindex -1 so you cannot reach it via tab key. I also included aria-hidden so screenreaders know it should ignore this.
<input class='copyfrom' tabindex='-1' aria-hidden='true'>
Then make the input field invisible by putting it off screen (did not work if I tried display: none; or other tricks)
<style>
.copyfrom {
position: absolute;
left: -9999px;
}
</style>
Then copy the value to the input field, select it and copy it.
var input = document.querySelector("input.copyfrom"); // select the input field
function showpropval(val) {
var selectedValues = getSelectValues(this); // get selected values
input.value = test.join(','); // join them in a comma separated list
input.select(); // select offscreen inputs text
document.execCommand("copy"); // copy it
this.focus(); // focus back on original, so we don't see any glitches
}
// credits to: https://stackoverflow.com/questions/5866169/how-to-get-all-selected-values-of-a-multiple-select-box
function getSelectValues(select) {
var result = [];
var options = select && select.options;
var opt;
for (var i=0, iLen=options.length; i<iLen; i++) {
opt = options[i];
if (opt.selected) {
result.push(opt.value || opt.text);
}
}
return result;
}
这篇关于JavaScript execCommand（'copy'）不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
