如何将警报中的文本输入字段与 R 中的模态对话框结合使用？

Question

我正在构建一个 Shiny app，用户可以在其中通过单击绘图中的点来打开 modalDialog。 modalDialog 包含单击点后面的原始数据图。向用户显示一个 actionButton 链接到代码以将详细绘图保存在 modalDialog 中，带有 sweetalert swal 消息和 inputfield。问题是 bootstrap 强制将焦点放在 modalDialog 上，导致输入字段被阻止用于输入。

我在网上看到一些 javascipt 应该会覆盖 enforcefocus，但我无法在 R

中完成这项工作

下面的伪代码与我的主程序结构相同，我尽可能地减少了它（可能会留下一些不需要的libraries，但它们都在我的app，应该不会造成问题。所有 packages 都是最新版本。

可能的解决方案使用此代码：

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

或来自bootstrap 4

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

在此处找到：link1 and here: link2

或者可以在此处找到更复杂的 javascipt 方法：link3

如何让app聚焦到input字段，2、return关闭sweetalert后聚焦到modalDialog？

感谢您的帮助！

应用程序：

  library(shiny)
  library(shinyjs)
  library(shinyBS)
  library(sweetalertR)
  library(shinyjqui)

  # ui section --------------------------------------------------------------


  jscode <- "
  shinyjs.swalsavepulse = function(params) { 
  var defaultParams = {
  title: null,
  text : null
  };
  params = shinyjs.getParams(params, defaultParams);
  swal({title : params.title, text : params.text,  
  type: 'input',
  inputType : 'text',
  html: true,
  showCancelButton : false,
  showConfirmButton : true,
  closeOnConfirm: true,
  confirmButtonColor: '#339FFF',
  allowOutsideClick: true   },
  evalFunction = function(isConfirm){
  if (isConfirm === true) {
  var val1= 1;
  Shiny.onInputChange('pulsefilename', [val1, Math.random()]);}
  }); 
  };"


  ui <- fluidPage( 
      shinyjs::useShinyjs(),     ### code for the sweetalerts
      shinyjs::extendShinyjs(text = jscode),  ### code for the sweetalerts

      tags$head(
        tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.0.1/sweetalert.min.js"),   ### code for the sweetalerts
        tags$link(rel = "stylesheet", type = "text/css",                                                  ### code for the sweetalerts
                  href = "https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.0.1/sweetalert.min.css")    ### code for the sweetalerts
      ),

      actionButton(inputId = "popup", label = "Popup")
      )



  # server section ----------------------------------------------------------

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

    observeEvent(input$popup, {
    pulseModal <- function(failed = FALSE) {         
                modalDialog(
                title = HTML(paste('<span style="color:white; font-size: 16px; font-weight:bold; font-family:sans-serif ">Pulse shape viewer<span>')),
                actionButton(inputId = "message", label = "message"),
                easyClose = TRUE,
                footer = NULL) }

    showModal(div(id= "modalPulse", pulseModal() ))

    jqui_draggable(selector = '.modal-content')
    })

    observeEvent(input$message, {
          shinyjs::js$swalsavepulse(title = '<span style="color:#339FFF; font-size: 30px">Save pulse shape<span>',
                                    text = "Enter file name.")
            })

  }

  shinyApp(ui, server)

Answer 1

我不知道你是否已经解决了这个问题，但是，这是我的答案。

我遇到了同样的问题，那是因为 tabindex="-1" 在 Bootstrap 模态上。

我是如何修复的：

// call this before showing SweetAlert:
function fixBootstrapModal() {
  var modalNode = document.querySelector('.modal[tabindex="-1"]');
  if (!modalNode) return;

  modalNode.removeAttribute('tabindex');
  modalNode.classList.add('js-swal-fixed');
}

// call this before hiding SweetAlert (inside done callback):
function restoreBootstrapModal() {
  var modalNode = document.querySelector('.modal.js-swal-fixed');
  if (!modalNode) return;

  modalNode.setAttribute('tabindex', '-1');
  modalNode.classList.remove('js-swal-fixed');
}

希望对你有所帮助。

如何将警报中的文本输入字段与 R 中的模态对话框结合使用？

How to Focus on textinput field in alert combined with modaldialog in R?

javascript

r

shiny

bootstrap-modal

sweetalert