Angular+Bootstrap项目在Edge及Safari中输入框无法输入的求助

Hey there, let’s work through this input problem you’re facing! Cross-browser quirks with Angular and Bootstrap can be tricky, but I’ve got a few targeted fixes to try based on common issues I’ve seen:

1. Replace Native autofocus with Angular-Focused Logic #

Edge and Safari sometimes clash with the native autofocus attribute when combined with Angular’s data binding. Instead, use Angular’s @ViewChild to set focus programmatically after the component renders:

First, update your component TypeScript:

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  @ViewChild('formNameInput') formNameInput!: ElementRef;

  ngAfterViewInit() {
    // Add a small delay to ensure the input is fully loaded
    setTimeout(() => {
      this.formNameInput.nativeElement.focus();
    }, 0);
  }
}

Then adjust your template to use a template reference instead of autofocus:

<div class="form-group">
  <!-- Name question on the form -->
  <div class="row">
    <div class="col-12">
      <label> Under what name do you want to save this form? </label>
    </div>
  </div>
  <div class="input-group">
    <input #formNameInput class="form-control" type="text" [(ngModel)]="cons.name" [ngModelOptions]="{standalone: true}" mdTooltipPosition="right"/>
  </div>
</div>

2. Rule Out Toolkit Directive Conflicts #

The mdTooltipPosition directive (likely from Angular Material) might be interfering with input events in older Edge/Safari builds. Try temporarily removing this attribute:

<input class="form-control" type="text" [(ngModel)]="cons.name" [ngModelOptions]="{standalone: true}"/>

If typing works after removing it, update your Angular Material package to the latest compatible version, or adjust the tooltip’s trigger behavior (e.g., use mdTooltipTrigger="hover" instead of the default, which might be capturing focus events).

3. Adjust ngModel Standalone Configuration #

Standalone ngModel instances can sometimes have binding issues in certain browser rendering contexts. Wrap your input in a basic Angular form and remove the standalone option:

<form #saveForm="ngForm">
  <div class="form-group">
    <!-- Name question on the form -->
    <div class="row">
      <div class="col-12">
        <label> Under what name do you want to save this form? </label>
      </div>
    </div>
    <div class="input-group">
      <input class="form-control" type="text" name="formName" [(ngModel)]="cons.name" mdTooltipPosition="right"/>
    </div>
  </div>
</form>

This lets Angular’s form system properly track the input, which can resolve hidden binding conflicts.

4. Check for CSS/Layout Blockers #

Occasionally, Bootstrap’s .input-group or .form-control classes can introduce unintended CSS properties (like pointer-events: none or overlapping elements) in Edge/Safari. Inspect the input element in your browser’s dev tools to:

• Ensure the input has no pointer-events: none set
• Confirm the input isn’t being covered by another invisible element
• Test removing the .input-group wrapper temporarily to see if typing works

5. Verify Browser & Library Compatibility #

• If you’re using the old EdgeHTML-based Edge (not Chromium), upgrade to the Chromium version—Angular has much better support for it.
• Check that your Angular, Bootstrap, and Angular Material versions are compatible with your target Safari version.

Start with the simplest tests first (like removing the tooltip or swapping out autofocus) to narrow down the root cause. Let me know if any of these fixes get your input working, or if you need to dig into more specific browser behavior!

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