onBlur事件是啥？

Posted 2023-04-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了onBlur事件是啥？相关的知识，希望对你有一定的参考价值。

失去焦点事件，但你鼠标焦点离开该控件的时候（比如你原来在一个文本框输入，输入完毕点击另一个文本框的时候，上一个文本框就触发了失去焦点事件）参考技术A 失去焦点事件，就是说当输入焦点离开该元素时，会触发此事件，与onfocus事件相反参考技术B 关注参考技术C 定义和用法
onblur 事件会在对象失去焦点时发生。

在本例中，我们将在用户离开输入框时执行 javascript 代码：

<html>
<head>
<script type="text/javascript">
function upperCase()

var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()

</script>
</head>

<body>

输入您的姓名：
<input type="text" id="fname" onblur="upperCase()" />

</body>
</html>本回答被提问者采纳

如何在 Angular2 上使用 onBlur 事件？

【中文标题】如何在 Angular2 上使用 onBlur 事件？【英文标题】：How to use onBlur event on Angular2? 【发布时间】：2016-04-27 08:53:38 【问题描述】：

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

<input type="text">

谁能帮我理解如何使用它？

【问题讨论】：

【参考方案1】：

另一种可能的选择

HTML 组件文件：

<input formControlName="myInputFieldName" (blur)="onBlurEvent($event)">

TypeScript 组件文件：

import  OnInit  from '@angular/core';
import  FormBuilder, FormGroup, Validators  from '@angular/forms';

export class MyEditComponent implements OnInit 

    public myForm: FormGroup;
    
    constructor(private readonly formBuilder: FormBuilder)  
    
    ngOnInit() 

        this.myForm = this.formBuilder.group(
            
            myInputFieldName: ['initial value',  validators: [Validators.required, Validators.maxLength(100), anotherValidator], updateOn: 'blur' ],

        );
    

    onBlurEvent(event) 
        
        // implement here what you want

        if (event.currentTarget && event.currentTarget.value && event.currentTarget.value !== '')

【讨论】：

【参考方案2】：

你也可以使用(focusout)事件：

使用(eventName) 将事件绑定到DOM，基本上() 用于事件绑定。您也可以使用ngModel 为您的model 获得两种方式绑定。在ngModel 的帮助下，您可以在component 中操作model 变量值。

在 HTML 文件中执行此操作

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

在你的（组件）.ts 文件中

export class AppComponent  
 model: any;
 constructor() 

 /*
 * This method will get called once we remove the focus from the above input box
 */
 someMethodWithFocusOutEvent() 
   console.log('Your method called');
   // Do something here

【讨论】：

@Aniketkale 如果我在你的方法someMethodWithFocusOutEvent 中添加了一个警报，程序进入一个循环，因为警报使该字段失去焦点，有没有办法解决这个问题？【参考方案3】：

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

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

你会在“result”中得到输出

【讨论】：

【参考方案4】：

使用(eventName) 将事件绑定到DOM，基本上() 用于事件绑定。还可以使用ngModel 获得myModel 变量的两种方式绑定。

标记

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

代码

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

Demo

替代（不推荐）

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

Demo

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

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

Design Docs

【讨论】：

为什么不推荐替代方案？ Angular 不希望您使用 HTML 中的 $event 将其发送回 JS。所有的 DOM 操作都应该通过诸如绑定、ngModel 之类的东西来完成。【参考方案5】：

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

【讨论】：

【参考方案6】：

HTML

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

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

【讨论】：

【参考方案7】：

这是 Github repo 上的建议答案：

// 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

【讨论】：

【参考方案8】：

/*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());