文章/答案/技术大牛

发布

社区首页 >问答首页 >模型驱动的表单- IE11上的输入占位符问题

问模型驱动的表单- IE11上的输入占位符问题
EN

Stack Overflow用户

提问于 2017-06-08 10:56:25

回答 1查看 2.2K关注 0票数 4

我已经将我的应用程序从角2.x更新到了角4.0.0。从此时起，我将收到以下输入类型文本窗体控件的问题：

在IE11上，当接收到焦点时，一个占位符被移除，表单控件被设置为脏，原始设置为false。在Chrome / FF上，这个问题从未发生过。

在IE11上，输入元素一旦聚焦就会变得脏。例如，与Chrome不同的是，您必须首先输入它。

HTML：

<input 
  type="text" 
  class="form-control" 
  id="processName" 
  [(ngModel)]="process.displayName" 
  [disabled]="isProcessLoading"
  #processName="ngModel"
  maxLength="64" 
  pattern="^.*\S.*" 
  name="processName" 
  placeholder="{{'PROCESS-FORM.name-placeholder' | translate}}"
  required 
  placeholderRequired 
  [inputBinding]="processName" 
/>

我已经创建了一个指令，当焦点集中时，将所有错误设置为null (有效)。

@Directive({
  selector: '[placeholderRequired]'
})
export class PlaceHolderDirective {
  @Input() inputBinding: any = null;

  constructor(private elementRef: ElementRef) {
  }

  @HostListener('focus', ['$event'])
  handleFocus(event: any) {
    if (navigator.appVersion && navigator.appVersion.indexOf('.NET') > -1) {
      // IE only
      if (!this.inputBinding._control._value) {
        this.inputBinding.control.setErrors(null);
        setTimeout(() => this.inputBinding.control.setErrors(null),0);
      }
    }
  }

  @HostListener('mousedown', ['$event'])
  handleMouseDown(event: any) {
    if (navigator.appVersion && navigator.appVersion.indexOf('.NET') > -1) {

      if (!this.inputBinding._control._value) {
        this.inputBinding.control.setErrors(null);
        setTimeout(() => this.inputBinding.control.setErrors(null),0);
      }
    }
  }

  @HostListener('blur', ['$event'])
  handleBlur(event: any) {
    if (navigator.appVersion && navigator.appVersion.indexOf('.NET') > -1) {
      if (!this.inputBinding._control._value.trim()) {
        // handle blur event
      }
    }
  }
}

当用户单击valueAccessor.onValueChanges()的某个输入字段时，该字段被标记为脏，使用control.markAsDirty()。我也添加了setTimeout()，但是它在执行markAsDirty()之后被执行，这在UI中几乎没有波动(脏的真->脏的假的)。

这种行为可以用任何其他方法来解决吗？是否有任何方法来覆盖onValueChanges()，因为在内部，它将字段设置为脏。添加其他库(如placeholder.js)是不需要的。

javascript

html

angular

internet-explorer

angular2-forms

回答 1

Stack Overflow用户

发布于 2019-03-15 11:43:53

我按以下方式定制了原始版本：

ts文件

iePristine: boolean = true;
pincodeCtrl = <formControl>this.form.get('pincode')
  setPlaceholder() {
    const placeholder = 'Enter Code';
    if (this.pincodeCtrl.value) {
      this.iePristine = false;
    }
    if (this.iePristine) {
      this.pincodeCtrl.markAsPristine();
    }
    return placeholder;
  }

isInvalidControl(control: FormControl) {
    return control.invalid && (control.dirty || control.touched);
  }

html文件

<input type="text" [placeholder]="setPlaceholder()" formControlName="pincode"
            [ngClass]="isInvalidControl(pincodeCtrl) ? 'form-control text-center is-invalid' : 'form-control text-center'" />

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44433804

复制

相似问题

问模型驱动的表单- IE11上的输入占位符问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问模型驱动的表单- IE11上的输入占位符问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问模型驱动的表单- IE11上的输入占位符问题
EN