Javascript 如何在 Angular2 上使用 onBlur 事件？

How to use onBlur event on Angular2?

提问by Ignat

How do you detect an onBlur event in Angular2? I want to use it with

你如何检测 Angular2 中的 onBlur 事件？我想用它

<input type="text">

Can anyone help me understand how to use it?

谁能帮助我了解如何使用它？

回答by Pankaj Parkar

Use (eventName)for while binding event to DOM, basically ()is used for event binding. Also use ngModelto get two way binding for myModelvariable.

使用(eventName)的同时，结合事件，DOM，主要()用于事件绑定。也用于ngModel获取myModel变量的双向绑定。

Markup

标记

<input type="text" [(ngModel)]="myModel" (blur)="onBlurMethod()">

Code

代码

export class AppComponent { 
  myModel: any;
  constructor(){
    this.myModel = '123';
  }
  onBlurMethod(){
   alert(this.myModel) 
  }
}

Demo

演示

Alternative(not preferable)

替代（不推荐）

<input type="text" #input (blur)="onBlurMethod($event.target.value)">

Demo

演示

---

---

For model driven form to fire validation on blur, you could pass updateOnparameter.

对于要在 上触发验证的模型驱动表单blur，您可以传递updateOn参数。

ctrl = new FormControl('', {
   updateOn: 'blur', //default will be change
   validators: [Validators.required]
}); 

Design Docs

设计文档

回答by Aniket kale

You can also use (focusout)event:

您还可以使用(focusout)事件：

Use (eventName)for while binding event to DOM, basically ()is used for event binding. Also you can use ngModelto get two way binding for your model. With the help of ngModelyou can manipulate modelvariable value inside your component.

使用(eventName)的同时，结合事件，DOM，主要()用于事件绑定。您也可以使用ngModel为您的model. 在ngModel您的帮助下，您可以model在component.

Do this in HTML file

在 HTML 文件中执行此操作

<input type="text" [(ngModel)]="model" (focusout)="someMethodWithFocusOutEvent($event)">

And in your (component) .ts file

并在您的（组件）.ts 文件中

export class AppComponent { 
 model: any;
 constructor(){ }
 someMethodWithFocusOutEvent(){
   console.log('Your method called');
   // Do something here
 }
}

回答by Chaudhary

you can use directly (blur)event in input tag.

您可以在输入标签中直接使用(blur)事件。

<div>
   <input [value] = "" (blur) = "result = $event.target.value" placeholder="Type Something">
   {{result}}
</div>

and you will get output in "result"

你会在“结果”中得到输出

回答by Sathish Visar

HTML

HTML

<input name="email" placeholder="Email"  (blur)="$event.target.value=removeSpaces($event.target.value)" value="">

TS

TS

removeSpaces(string) {
 let splitStr = string.split(' ').join('');
  return splitStr;
}

回答by Er Mariam Akhtar

/*for reich text editor */
  public options: Object = {
    charCounterCount: true,
    height: 300,
    inlineMode: false,
    toolbarFixed: false,
    fontFamilySelection: true,
    fontSizeSelection: true,
    paragraphFormatSelection: true,

    events: {
      'froalaEditor.blur': (e, editor) => { this.handleContentChange(editor.html.get()); }}

回答by Er Mariam Akhtar

This is the proposed answer on the Github repo:

这是 Github 存储库上的建议答案：

// example without validators
const c = new FormControl('', { updateOn: 'blur' });

// example with validators
const c= new FormControl('', {
   validators: Validators.required,
   updateOn: 'blur'
});

Github : feat(forms): add updateOn blur option to FormControls

Github : feat(forms): 向 FormControls 添加 updateOn 模糊选项

回答by Kevin Black

Try to use (focusout) instead of (blur)

尝试使用 (focusout) 而不是 (blur)