Событие ввода MatInput вызывается при загрузке страницы в Inte rnet Explorer 11, когда установлен заполнитель

Question

Я обнаружил, что есть ошибка IE, когда установка заполнителя вызывает событие ввода как , описанное здесь . Это происходит при загрузке страницы, поэтому не было никакого взаимодействия с пользователем.

Мой код:

app.component. html

<mat-form-field>
  <input matInput placeholder="test" (input)="onValueChange('test')">
</mat-form-field>

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

  ngOnInit() {
  }

  onValueChange(value: string) {
    console.log("should not be in here");
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatDialogModule } from '@angular/material/dialog';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatCardModule } from '@angular/material/card';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatCardModule, MatFormFieldModule, MatInputModule, MatDialogModule, BrowserAnimationsModule, MatExpansionModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

browserlist (обратите внимание, что IE 9-11 включено)

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.

tsconfig. json (обратите внимание на es5)

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Вот проект стекаблиц , но вы не можете отлаживать с IE11. В моем реальном проекте у меня есть ngFor, который создает несколько элементов ввода.

Есть ли решение для этого?

Демонстрация проблемы

нг версия

Angular CLI: 8.3.22
Node: 10.14.2
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.22
@angular-devkit/build-angular     0.803.22
@angular-devkit/build-optimizer   0.803.22
@angular-devkit/build-webpack     0.803.22
@angular-devkit/core              8.3.22
@angular-devkit/schematics        8.3.22
@angular/cdk                      7.3.6
@angular/cli                      8.3.22
@angular/material                 7.3.6
@ngtools/webpack                  8.3.22
@schematics/angular               8.3.22
@schematics/update                0.803.22
rxjs                              6.5.4
typescript                        3.5.3
webpack                           4.39.2

пошаговые инструкции

• ng new test (без Angular маршрутизация, S CSS)
• заменить app.component. html и app.component.ts (добавить mat-form-field и onValueChange())
• добавить MatFormFieldModule, MatInputModule и BrowserAnimationsModule в app.module.ts
• ng add @angular/material (Indi go -pink, нет Hammer JS, браузерная анимация есть)
• edit browserlist (удалить НЕ в строке IE 9-11)
• установите target в es5 in tsconfig. json

Answer 1

Я попытался проверить ваш пример кода с помощью браузера IE 11. Я обнаружил, что событие ввода не вызывается при загрузке страницы. Это происходит нормально, когда ввод изменяется.

Результат тестирования:

Я предлагаю вам еще раз проверить проблему и проверить результат с новым пустым проектом.

Дайте мне знать, если я пропустил какие-либо шаги в тестировании. Я снова попробую проверить проблему, чтобы проверить результат.

Редактировать: -------------------------- -------------------------------------------------- ---------------------------------------------

Потратив некоторое время на сопоставление двух проектов, я обнаружил разницу.

Я заметил, что placeholder = "test" в вашем HTML коде в app.component. html вызывает эту проблему. Вы уже упоминали об этом в своем исходном сообщении. Кроме этого я не получил никакой другой разницы. Это похоже на любую ошибку.

<mat-form-field>
  <input matInput placeholder="test" (input)="onValueChange($event)">
</mat-form-field>

Смотрите здесь:

Это работало на моей стороне, потому что я добавил Значение атрибута для входа. Я добавил его только для целей тестирования и из-за того, что это значение отображается вместо текста заполнителя. Я забыл удалить его.

Это мой код:

<mat-form-field>
  <input matInput placeholder="test" (input)="onValueChange($event)" value="sample text">
</mat-form-field>

Я не уверен, почему placeholder вызвал эту проблему. Поскольку IE будет получать обновления безопасности только в будущем, я не уверен, будет ли какое-либо исправление для него. Вы можете попробовать использовать обходные пути, чтобы избежать проблемы в браузере IE.

Answer 2

Мое решение основано на этом :

app.component. html

<mat-form-field>
  <input matInput placeholder="test" (input)="onValueChange($event)" (focus)="onFocus($event)" (blur)="onFocus(null)">
</mat-form-field>

app.component .ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  selectedElement: any;

  ngOnInit() {
  }

  onValueChange(event) {
    if (event && this.selectedElement && event.target == this.selectedElement) {
        // do whatever you like
        console.log(event.target.value)
    }
  }

  onFocus(event) {
    if(event){
       this.selectedElement = event.target;
    } else {
       this.selectedElement = null; 
    }
    //console.log(this.selectedElement);
  }
}

При этом код вызывается только в том случае, если пользователь изменяет значение (ввод / удаление некоторых символов). Вы должны сделать это для каждого поля input / textarea, которое имеет заполнитель и использует (input).