Shiny中dateInput移动端唤起键盘问题及替代方案咨询

针对你遇到的Shiny dateInput在移动端自动唤起键盘的问题，这里有两个不用牺牲交互体验的解决方案：

方案1：动态控制readonly属性 #

通过JavaScript动态添加/移除readonly属性，既保证日期选择器能正常触发，又能阻止不必要的键盘唤起：

library(shiny)

ui <- fluidPage(
  dateInput(
    "date",
    "What is your birthday?",
    width = "100%"
  ),
  tags$script(HTML("
    const dateInput = document.getElementById('date');
    
    // 点击输入框时移除readonly，确保日期选择器弹出
    dateInput.addEventListener('click', function() {
      this.removeAttribute('readonly');
    });
    
    // 输入框失去焦点时重新添加readonly，阻止键盘唤起
    dateInput.addEventListener('blur', function() {
      this.setAttribute('readonly', 'readonly');
    });
    
    // 处理触摸事件：阻止默认行为避免唤起键盘，同时手动触发点击打开选择器
    dateInput.addEventListener('touchstart', function(e) {
      e.preventDefault();
      this.removeAttribute('readonly');
      this.click();
    });
  "))
)

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

shinyApp(ui=ui, server=server)

核心逻辑是：仅在用户主动交互（点击/触摸）时解除只读限制，让日期选择器正常工作；交互结束后恢复只读状态，防止键盘意外唤起。

方案2：添加inputmode属性 #

直接给dateInput添加inputmode="none"属性，告诉移动端浏览器不要唤起键盘，同时保留原生日期选择器的交互：

library(shiny)

ui <- fluidPage(
  dateInput(
    "date",
    "What is your birthday?",
    width = "100%"
  ),
  tags$script(HTML("
    const dateInput = document.getElementById('date');
    // 设置inputmode为none，阻止键盘唤起
    dateInput.setAttribute('inputmode', 'none');
  "))
)

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

shinyApp(ui=ui, server=server)

这个方法更简洁，inputmode="none"是HTML5专门用于控制输入框键盘唤起行为的属性，适配触摸设备场景。

另外，针对你之前selectInput的问题，也可以用类似的JS方法解决，不用设置selectize=FALSE——比如给select元素添加inputmode="none"或者动态控制readonly，既能保留selectize的流畅体验，又能阻止键盘唤起。

内容的提问来源于stack exchange，提问作者Dou