Javascript 在闪亮的应用程序中复制并粘贴selectizeInput中的文本

我的闪亮应用程序中有一个selectizeInput UI对象，我希望能够复制并粘贴逗号分隔的输入列表（即从selectizeInput复制并粘贴到selectizeInput）

目前，我可以从其他地方复制逗号分隔的输入列表（即A、B、C、D），然后将其粘贴到selectizeInput中。粘贴只能使用“Ctrl+V”键，而不能使用“右键单击+粘贴”键，但这很好

我还希望能够从selectizeInput对象复制输入，以便将它们粘贴到其他位置

请参阅下面的代码（第一个选项是空字符串“”，因为我不希望在开头选择任何内容）：

我可以使用“Ctrl+A”选择所有输入，或使用“Ctrl+鼠标单击”选择特定输入（我知道输入已被选择，因为它们在选择时会改变颜色），但“Ctrl+C”或“Ctrl+X”不起作用。此外，右键单击所选输入不会提供“复制”选项

理想情况下，我希望使用“Ctrl+A”或“Ctrl+mouse click”选择输入，然后使用“Ctrl+C”复制它们

---

谢谢

这是一个有点冗长的解决方案，但它是有效的。当用户使用复制粘贴快捷方式时，它会将javascript行为注入复制到剪贴板/粘贴箱的selectizeInput中

有很多更干净的方法可以做到这一点，但它们需要更高级的概念，比如单独的.js文件。所以这里是埃塞尔，但梅西尔的方式

下面是代码，因此您大致可以看到它的作用（所有

console.log（）

位都可以删除，您可以在那里看到所有步骤以及它们是如何发生的。要在浏览器中查看“console”onen dev工具，那里有一个控制台面板（有点像您应用程序的“厨房门/八卦墙”）

下面是可以实现此功能的javascript，下面是添加位置的说明。简言之，它将：

• 一旦页面被加载
• 每当有人试图复制时，添加新行为
• 当有人试图复制时，请检查他们从中复制的字段是否为selectize输入
• 如果是，抓取其中的文本，用comas将其分隔，然后将thsat放在剪贴板/粘贴箱中

Javascript代码：

console.log("page will load now");
document.addEventListener("DOMContentLoaded", function(){
  console.log("page loaded");
  document.addEventListener("copy", (event) => {
    console.log("coppying from item:", event.target);
    const anchorNode = document.getSelection().anchorNode
    if (anchorNode instanceof HTMLElement && anchorNode.classList.contains("selectize-input")) {
       const items = Array.from(anchorNode.getElementsByClassName("item active"))
      const selectedItemsAsString = items.map(i => i.innerText).join(", ")
      console.log("coppied content:", selectedItemsAsString);
      event.clipboardData.setData("text/plain", selectedItemsAsString)
      event.preventDefault()
    }
  })
});

---

解释放在哪里，在你的用户界面的末尾，这是否回答了你的问题？

console.log("page will load now");
document.addEventListener("DOMContentLoaded", function(){
  console.log("page loaded");
  document.addEventListener("copy", (event) => {
    console.log("coppying from item:", event.target);
    const anchorNode = document.getSelection().anchorNode
    if (anchorNode instanceof HTMLElement && anchorNode.classList.contains("selectize-input")) {
       const items = Array.from(anchorNode.getElementsByClassName("item active"))
      const selectedItemsAsString = items.map(i => i.innerText).join(", ")
      console.log("coppied content:", selectedItemsAsString);
      event.clipboardData.setData("text/plain", selectedItemsAsString)
      event.preventDefault()
    }
  })
});

ui <- fluidPage( some_components_of_yours,
                 selectizeInput(
                       "codeInput", 
                       label = "Codes (if pasting, coma separated)",
                       choices = c("", genes), 
                       multiple = T,
                       options = list(delimiter = ",", create = T), 
                 ),
                 some_components_of_yours, 
                 tags$script(HTML(
                    'HERE IN THESE SINGLE QUOTES PUT THE JAVASCRIPT CODE FROM ABOVE'
                )))

ui <- fluidPage(
                 selectizeInput(
                       "codeInput", 
                       label = "Codes (if pasting, coma separated)",
                       choices = c("", genes), 
                       multiple = T,
                       options = list(delimiter = ",", create = T), 
                 ),
                 tags$script(HTML(
                    '    console.log("page will load now");
    document.addEventListener("DOMContentLoaded", function(){
      console.log("page loaded");
      document.addEventListener("copy", (event) => {
        console.log("coppying from item:", event.target);
        const anchorNode = document.getSelection().anchorNode
        if (anchorNode instanceof HTMLElement && anchorNode.classList.contains("selectize-input")) {
           const items = Array.from(anchorNode.getElementsByClassName("item active"))
          const selectedItemsAsString = items.map(i => i.innerText).join(", ")
          console.log("coppied content:", selectedItemsAsString);
          event.clipboardData.setData("text/plain", selectedItemsAsString)
          event.preventDefault()
        }
      })
    });'
                )))