jQuery datetimepicker：如何阻止输入框获焦及页面滚动？

架构老林

2026-5-15

嘿，这个移动端滚动的问题我太熟了！之前帮好几个开发者搞定过，确实选完日期就自动跳来跳去的体验很差。给你几个靠谱的解决思路，你可以根据自己用的datetimepicker版本选：

方法1：在日期选择回调中手动取消焦点

大多数datetimepicker插件都提供了选择完成后的回调函数，你可以在这个回调里让输入框（或者关联的输入框）失去焦点，这样移动端浏览器就不会触发自动滚动了。示例代码：

// 初始化datetimepicker时配置onSelect回调
$('#your-target-input').datetimepicker({
  onSelect: function(dateText, inst) {
    // 让当前datetimepicker绑定的输入框失焦
    $(this).blur();
    // 如果是其他关联输入框触发的聚焦，就换成对应的选择器
    // $('#related-input').blur();
  }
});

方法2：禁用插件自带的自动聚焦选项

如果你用的是比较流行的xdan/jQuery-datetimepicker插件，它本身就有一个focusInput配置项，直接设为false就能阻止选择日期后自动聚焦输入框，从根源解决问题：

$('#your-target-input').datetimepicker({
  focusInput: false
});

方法3：拦截聚焦事件阻止默认滚动

如果上面两种方法都不生效，可能是插件内部的逻辑强制触发了聚焦，这时候可以给关联输入框绑定focus事件，手动阻止浏览器的自动滚动行为：

$('#related-input').on('focus', function(e) {
  // 阻止浏览器默认的滚动到聚焦元素行为
  e.preventDefault();
  // 额外保险：手动保持当前滚动位置不变
  window.scrollTo(window.scrollX, window.scrollY);
});