Angular项目中Safari浏览器点击事件无法触发隐藏datetime-local输入框问题

问题原因 #

Safari 出于安全交互限制，会拦截对visibility: hidden、display: none类完全隐藏元素的程序化点击事件，你当前的CSS规则中visibility: hidden触发了该限制，导致JS调用click无效。

解决方案 #

你可以选择以下任意一种方案适配：

方案1：使用标准showPicker()方法触发选择器（推荐，适配Safari 15.4+及所有现代浏览器）

该方法是HTML规范中专门用于触发输入控件选择面板的API，比手动触发click兼容性更稳定：

1. 调整CSS，移除visibility: hidden规则：

.hide-input {
  left: -30000px;
  opacity: 0;
  position: absolute;
}

2. 修改TypeScript触发逻辑：

@ViewChild('startDatetimeInput') startDatetimeInput?: ElementRef<HTMLInputElement>;
@ViewChild('endDatetimeInput') endDatetimeInput?: ElementRef<HTMLInputElement>;

get startDatetime(): AbstractControl | null {
  return this.eventForm.get('startDatetime');
}

openPicker(type: 'start' | 'end'){
  const targetInput = type === 'start' 
    ? this.startDatetimeInput?.nativeElement 
    : this.endDatetimeInput?.nativeElement;
  if (!targetInput) return;
  try {
    // 优先调用标准API
    targetInput.showPicker();
  } catch (err) {
    // 旧浏览器降级用click
    targetInput.click();
  }
}

方案2：全版本兼容无侵入方案（适配所有Safari版本）

不依靠JS触发点击，直接把隐藏的透明输入框叠放在触发区域上方，用户点击时直接触发原生输入的点击行为，完全规避Safari的安全限制：

1. 调整CSS：

/* 给触发区域加相对定位 */
.date-trigger-wrap {
  position: relative;
}
.hide-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

2. 调整HTML结构，把input放到触发元素内部：

<div class="date-trigger-wrap" (click)="无需额外绑定点击事件">
  <span *ngIf="startDatetime?.value">
     {{startDatetime?.value | date: 'MM/dd/yyyy hh:mm a'}}
  </span>
  <div *ngIf="!startDatetime?.value" class="empty-date">
      --
  </div>
  <input class="hide-input" formControlName="startDatetime" type='datetime-local'>
</div>

该方案不需要额外的JS点击触发逻辑，原生点击行为所有浏览器都兼容。

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