时间戳

首页 > 解决方案 > Select2 呈现的跨度元素不可复制到剪贴板

javascript - Select2 呈现的跨度元素不可复制到剪贴板

问题描述

我一直在尝试在 select2 小部件中获取所选值的标签（而不是值本身），并使用 clipboardjs 将其复制到剪贴板，但失败了。

要轻松重现这一点，请访问https://select2.org/getting-started/basic-usage并在 select2 示例中选择“阿拉斯加”。

通过检查元素，我可以看到包含所选值“阿拉斯加”的元素：

<span class="select2-selection__rendered" id="select2-zhjr-container" role="textbox" aria-readonly="true" title="Alaska">Alaska</span>

所以我尝试使用从clipboard.js源修改的这段代码进行选择，以模拟通过选择来选择文本值：

element = document.querySelector('#select2-zhjr-container')
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
selectedText = selection.toString();
console.log('selectedText: ' + selection)

事实证明 selectedText 是空的。

如何正确获取 selectedText 值，以便可以使用 clipboardjs 将其复制到剪贴板？

是的，我也可以使用 DOM 获取标签文本，但是它不能复制到剪贴板中。必须以编程方式选择标签文本，然后将其复制到剪贴板中。

以编程方式选择和获取所选文本是失败的。

谢谢你。

标签： javascriptjquery-select2clipboard.js

解决方案

通过使用 textContent 我能够得到它

element = document.querySelector('#select2-v8mi-container')
console.log('selectedText: ' + element.textContent)

selectedText: Alaska

推荐阅读