0

我发现有一个 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 { }

浏览器列表 （注意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
  }
}

这是stackblitz 项目，但您无法使用 IE11 进行调试。在我的真实项目中，我有一个ngFor，它创建了多个输入元素。

有解决方案吗？

证明问题

IE 在页面加载时调用输入更改事件

版本

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（无角度路由，SCSS）
  • 替换app.component.html和app.component.ts（添加mat-form-field和onValueChange()）
  • 添加MatFormFieldModule,MatInputModule和app.module.tsBrowserAnimationsModule _
  • ng add @angular/material（靛蓝粉色，没有 HammerJS，浏览器动画是的）
  • 编辑浏览器列表（在 IE 9-11 行删除 NOT）
  • 在tsconfig.json中设置target为es5
4

2 回答 2

1

我尝试使用 IE 11 浏览器测试您的示例代码。我发现在页面加载时没有调用输入事件。它通常在输入更改时发生。

测试结果：

在此处输入图像描述

我建议您再次测试问题并使用新的空项目检查结果。

如果我错过了测试中的任何步骤，请告诉我。我将再次尝试测试问题以检查结果。

编辑 ： - - - - - - - - - - - - - - - - - - - - - - - - -------------------------------------------------- ----------------------

在花了一些时间再次匹配这两个项目后，我发现了不同之处。

我注意到app.component.html中 HTML 代码中的placeholder="test"导致了这个问题。您已经在原始帖子中提到了它。除此之外，我没有得到任何其他区别。它看起来像任何错误。

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

看这里：

在此处输入图像描述

它对我有用，因为我已将Value属性添加到输入中。我添加它只是为了测试目的，因为这个值被显示而不是占位符文本。我忘记删除它。

这是我的代码：

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

我不确定为什么占位符会导致此问题。由于 IE 将来只会获得安全更新，我不确定是否会有任何修复。您可以尝试使用解决方法来避免 IE 浏览器中的问题。

于 2020-03-11T03:30:15.100 回答
0

我的解决方案基于此：

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).

于 2020-04-08T11:21:45.737 回答