javascript - Select2 渲染的 span 元素无法复制到剪贴板中

标签 javascript jquery-select2 clipboard.js

我一直在尝试在 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 获取标签文本,但它无法复制到剪贴板中。标签文本必须以编程方式选择,然后复制到剪贴板中。

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

谢谢。

最佳答案

通过使用textContent我能够得到它

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

selectedText: Alaska

关于javascript - Select2 渲染的 span 元素无法复制到剪贴板中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57492767/

相关文章:

jquery - Select2 4.0.0不支持标签,无法通过ajax调用获取标签项

javascript - 将 Firefox 与剪贴板 js 一起使用时,空白不会被删除

javascript - 我应该从服务器拉取还是只更新 View ?

javascript - Ember.js,如何在 View 中使用 Javascript?

javascript - 如何从服务器加载 angular-formly vm.fields

javascript - 始终触发 <select> 的 "change"-事件,即使单击的 select2-option 已被选中

javascript - 如何在单击按钮时删除附加的 div?

jquery - 关闭包含模糊时事件 Select2 元素的 Bootstrap 下拉列表

javascript - 只能在第二次单击时复制到剪贴板

javascript - 如何使用 clipboard.js 获取 href 属性?