javascript - 在 Shiny 应用程序的 selectizeInput 中复制和粘贴文本

Question

我的 Shiny 应用程序中有一个 selectizeInput UI 对象，我希望能够复制并粘贴以逗号分隔的输入列表(即复制并粘贴到 selectizeInput)。

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

我还希望能够从 selectizeInput 对象复制我的输入，以便我可以将它们粘贴到其他地方。

见下面的代码(第一个选择是一个空字符串，“”，因为我不想在开始时选择任何东西):

selectizeInput(
    inputId = "genes_list",
    label = "Genes",
    width = "100%",
    multiple = TRUE,
    choices = c("", genes),
    selected = "",
    options = list(
    delimiter = ',',
    create = I("function(input, callback){
        return {
        value: input,
        text: input };
    }")))

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

理想情况下，我想使用“Ctrl + A”或“Ctrl + 鼠标单击”来选择我的输入，然后使用“Ctrl + C”复制它们。

谢谢

Answer 1

这是一个有点冗长的解决方案，但它确实有效。当一个人使用复制粘贴快捷方式时，它会在您的 selectizeInput 中注入(inject)一个 javascript 行为，即复制到剪贴板/粘贴站。

有更简洁的方法来做到这一点，但它们需要更高级的概念，比如单独的 .js 文件。所以这是更简单但更困惑的方法。

下面是代码，因此您可以大致了解它的作用(所有 console.log() 位都可以删除，您可以在其中查看所有步骤以及它们是如何发生的。查看浏览器中的“控制台”onen 开发工具，那里有一个控制台面板(它有点像应用程序的“厨房门/八卦墙”)。

这是执行此操作的 javascript，下面是添加位置的说明。简而言之，它将:

• 页面加载完毕
• 每当有人试图复制时添加一个新行为
• 当有人试图复制时，检查他们复制的字段是否是一个 selectize-input
• 如果是，抓取其中的文本，用逗号分隔，然后将其放入剪贴板/粘贴站

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()
    }
  })
});

解释把它放在哪里，在你的 ui <- fluidPage( ..... )

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()
        }
      })
    });'
                )))

我的解决方案是基于其他人的这些答案:

• https://stackoverflow.com/a/59773533/498201
• https://github.com/selectize/selectize.js/issues/1177#issuecomment-480633418