javascript - 如何集中注意警报中的文本输入字段以及R中的模式对话框？

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

我在网上看到了一些javascipt应该会覆盖forceforcefocus的内容，但是我无法在R中进行这项工作

下面的虚拟代码与我的主应用程序具有相同的结构，并且我尽可能地减少了它（可能留下了一些不需要的libraries，但是它们都在我的app中使用了，应该不会引起问题。） packages是最新版本。

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

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

或从bootstrap 4

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

在此处找到：link1和此处：link2

或更复杂的javascipt方法可以在这里找到：link3

如何使app聚焦在input字段上，然后在modalDialog关闭后将焦点重新聚焦到sweetalert？

感谢您的任何帮助！

APP：

  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)

最佳答案

我不知道您是否已解决问题，但是，这是我的答案。

我有同样的问题，这是因为Bootstrap模态上的tabindex="-1"。

我如何解决：

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

希望对您有所帮助。