javascript - 如何关注alert中的文本输入字段与R中的modaldialog相结合？

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在这里:link2

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

如何制作app关注input字段，第二，将焦点返回到 modalDialog之后sweetalert关闭了？

感谢您的帮助!

应用程序:

  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

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

我也遇到了同样的问题，那是因为 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');
}

希望这对您有帮助。