如何在移动端使用R Shiny的dateInput时避免弹出键盘及地图缩放？

方法1：禁用iOS自动缩放 #

iOS Safari会在聚焦字体小于16px的输入框时自动缩放页面，给dateInput强制设置足够的字体大小，并禁用页面缩放即可解决：

在Shiny的UI部分添加自定义CSS：

tags$head(
  tags$style(HTML("
    /* 强制dateInput字体大小，避免iOS自动缩放 */
    .shiny-input-container input[type='date'] {
      font-size: 16px !important;
    }
    /* 锁定页面缩放比例 */
    html {
      -webkit-text-size-adjust: 100%;
      touch-action: pan-x pan-y;
    }
  "))
)

方法2：替换为更适配移动端的日期选择器 #

原生dateInput在iOS上的表现不够友好，可以用shinyWidgets包的airDatepickerInput替代，它不会触发键盘弹出，移动端适配更好：

1. 先安装加载包：

install.packages("shinyWidgets")
library(shinyWidgets)

2. 替换原dateInput：

airDatepickerInput(
  inputId = "your_date_id",
  label = "选择日期",
  options = list(
    mobile = TRUE,
    dateFormat = "yyyy-mm-dd"
  )
)

方法3：用JS阻止键盘弹出 #

如果不想替换组件，通过JavaScript监听dateInput的聚焦事件，直接唤起原生日期选择器而非键盘：

在UI中添加以下脚本：

tags$head(
  tags$script(HTML("
    $(document).on('focus', 'input[type=\"date\"]', function(e) {
      e.preventDefault();
      this.showPicker();
    });
  "))
)

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