闪亮的搜索输入

Question

有谁知道是否可以创建一个 "shinyWidget :: searchInput" 设计的网格，只允许在字段中输入 9 位数字？
https://pasteboard.co/J3mduIS.png

Answer 1

这是 bootstrap-pincode-input 的出色实现。

下载文件bootstrap-pincode-input.js和bootstrap-pincode-input.css from here。将它们放在包含闪亮应用程序的文件夹的 www 子文件夹中。

同时将下面的JS文件添加到www子文件夹，命名为pincodeBinding.js.

var pincodeBinding = new Shiny.InputBinding();

$.extend(pincodeBinding, {
  find: function (scope) {
    return $(scope).find(".pincode");
  },
  getValue: function (el) {
    return $(el).val();
  },
  setValue: function(el, value) {
    $(el).val(value);
  },
  subscribe: function (el, callback) {
    $(el).on("change.pincodeBinding", function (e) {
      callback();
    });
  },
  unsubscribe: function (el) {
    $(el).off(".pincodeBinding");
  },
  initialize: function(el) {
    var $el = $(el);
    $el.pincodeInput({
      inputs: $el.data("ndigits"),
      hidedigits: $el.data("hide"),
      complete: function(value, e, errorElement){
        Shiny.setInputValue($el.attr("id"), value); 
      }
    });
  }
});

Shiny.inputBindings.register(pincodeBinding);

现在，闪亮的应用程序：

library(shiny)

pincodeInput <- function(inputId, width = "30%", height = "100px", 
                         label = NULL, ndigits = 4, hideDigits = FALSE){
  tags$div(style = sprintf("width: %s; height: %s;", width, height),
           shiny:::shinyInputLabel(inputId, label),
           tags$input(id = inputId, class = "pincode", type = "text", 
                      `data-ndigits` = ndigits,
                      `data-hide` = ifelse(hideDigits, "true", "false")
           )
  )
}

ui <- fluidPage(
  tags$head(
    tags$link(rel = "stylesheet", href = "bootstrap-pincode-input.css"),
    tags$script(src = "bootstrap-pincode-input.js"),
    tags$script(src = "pincodeBinding.js")
  ),
  br(),
  pincodeInput("pincode", label = "Enter pincode"),
  br(),
  h3("You entered:"),
  verbatimTextOutput("pincodeValue")
)

server <- function(input, output, session){

  output[["pincodeValue"]] <- renderPrint({
    input[["pincode"]]
  })

}

shinyApp(ui, server)

请注意，密码输入只接受数字，不接受字母字符。不知道这是不是你想要的？

编辑：可清除密码输入

在www文件夹中添加这个CSS文件，命名为pincode-input.css:

.clearable {
  padding: 1px 6px 1px 1px;
  display: inline-flex;
}

.clearable span {
  cursor: pointer;
  color: blue;
  font-weight: bold;
  visibility: hidden;
  margin-left: 5px;
}

用这个文件替换pincodeBinding.js：

var pincodeBinding = new Shiny.InputBinding();

$.extend(pincodeBinding, {
  find: function (scope) {
    return $(scope).find(".pincode");
  },
  getValue: function (el) {
    return $(el).val();
  },
  setValue: function(el, value) {
    $(el).val(value);
  },
  subscribe: function (el, callback) {
    $(el).on("change.pincodeBinding", function (e) {
      callback();
    });
  },
  unsubscribe: function (el) {
    $(el).off(".pincodeBinding");
  },
  initialize: function(el) {
        var $el = $(el);
        var clearBtn = el.nextElementSibling;
        $el.pincodeInput({
      inputs: $el.data("ndigits"),
      hidedigits: $el.data("hide"),
      complete: function(value, e, errorElement){
        Shiny.setInputValue($el.attr("id"), value); 
      }, 
      change: function(){
        clearBtn.style.visibility = ($el.val().length) ? "visible" : "hidden";
      }
    });
    clearBtn.onclick = function() {
      this.style.visibility = "hidden";
      $el.pincodeInput().data("plugin_pincodeInput").clear();
      Shiny.setInputValue($el.attr("id"), "");
    };
  }
});

Shiny.inputBindings.register(pincodeBinding);

应用程序：

library(shiny)

pincodeInput <- function(inputId, width = "30%", height = "100px", 
                         label = NULL, ndigits = 4, hideDigits = FALSE){
  tags$div(style = sprintf("width: %s; height: %s;", width, height),
           shiny:::shinyInputLabel(inputId, label),
           tags$span(
             class = "clearable",
             tags$input(id = inputId, class = "pincode", type = "text", 
                        `data-ndigits` = ndigits,
                        `data-hide` = ifelse(hideDigits, "true", "false")
             ),
             tags$span(title = "Clear", HTML("&times;"))
           )
  )
}


ui <- fluidPage(
  tags$head(
    tags$link(rel = "stylesheet", href = "bootstrap-pincode-input.css"),
    tags$link(rel = "stylesheet", href = "pincode-input.css"),
    tags$script(src = "bootstrap-pincode-input.js"),
    tags$script(src = "pincodeBinding.js") 
  ),
  br(),
  pincodeInput("pincode", label = "Enter pincode"),
  br(),
  h3("You entered:"),
  verbatimTextOutput("pincodeValue")
)

server <- function(input, output, session){

  output[["pincodeValue"]] <- renderPrint({
    input[["pincode"]]
  })

}

shinyApp(ui, server)

闪亮的搜索输入

Shiny searchInput

r

shiny

shinywidgets

编辑：可清除密码输入