如何将警报中的textinput字段与R中的模态对话框组合在一起? [英] How to Focus on textinput field in alert combined with modaldialog in R?

问题描述

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

I am building a Shiny app in which a user can open a modalDialog by clicking on points in a plot. The modalDialog contains a plot of the raw data behind the point clicked. The user is presented an actionButton linked to code to save the detailed plot in the modalDialog with a sweetalert swal message with an inputfield. The problem is that bootstrap forces focus on the modalDialog, causing the inputfield to be blocked from use for typing.

我在网上看到了一些javascipt应该覆盖forceforcefocus的内容，但是我无法在R

I have seen some javascipt online that should overwrite the enforcefocus, but I am unable to make this work in R

下面的伪代码与我的主应用程序具有相同的结构，并且我尽可能地减少了它(可能遗留下了一些不必要的libraries，但它们都在我的app中使用了，不应引起问题.所有packages是最新版本.

The dummy code below has the same structure as my main app, and I reduced it as far as possible (might have left a few unneeded libraries, but they are all used in my app, and should not cause problems. All packages are the most recent versions.

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

The possible solutions use this code:

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

或从引导程序4

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

在这里找到: link1 并在这里:

found here: link1 and here: link2

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

Or a more complicated javascipt approach can be found here: link3

如何使app聚焦在input字段上，并且第二，在sweetalert关闭后将焦点返回到modalDialog?

How to make the app focus on the input field, and 2nd, return focus to the modalDialog after sweetalert is closed?

感谢您的帮助！

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)

推荐答案

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

i don't know if you already fix the problem, but, here is my answer.

我遇到了同样的问题，这是因为tabindex="-1"在Bootstrap模式下.

I had the same problem, that's because tabindex="-1" on Bootstrap modal.

我如何解决:

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

希望这对您有所帮助.

这篇关于如何将警报中的textinput字段与R中的模态对话框组合在一起?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！