Блестящий поискВход

Question

Кто-нибудь знает, возможно ли создать «глянцевый виджет :: searchInput» с сеткой, которая позволила бы вводить в поле только 9 цифр?
https://pasteboard.co/J3mduIS.png

Answer 1

Вот блестящая реализация bootstrap-pincode-input.

Загрузите файлы bootstrap -pincode-input. js и bootstrap -pincode-input. css отсюда . Поместите их в подпапку www*1011* папки, содержащей блестящее приложение.

Также добавьте приведенный ниже файл JS в подпапку www*1016*, назовите его 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)

Обратите внимание, что ввод пин-кода принимает только цифры, а не буквы алфавита. Я не знаю, это то, что вы хотите?

---

РЕДАКТИРОВАТЬ: очищаемый ввод PIN-кода

Добавить это CSS файл в папке www*1037*, назовите его ввод PIN-кода. 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)