单击Angular JS中的输入字段事件

时间:2017-09-13 17:44:01

标签: javascript angularjs mouseclick-event

假设您在Angular JS应用程序中有一个输入字段

 <input id="title" type="text" name="title" placeholder="enter a title" ng-model="item.title" />

我想在用户完成与输入的交互之后向用户显示关于输入数据有效性的一些反馈,但我想不出有关观察“点击关闭”事件的指令。也就是说,当用户键入表单时,可以选择下一个选项卡,也可以单击其他任何位置。

如何捕获“click off and element”事件。

请注意,这与“off-click”事件形成对比,其中事件是指用户点击给定元素的任何位置。

2 个答案:

答案 0 :(得分:1)

您需要使用ng-blur指令。

ng-blur:

  

指定模糊事件的自定义行为。

     

当元素失去焦点时会触发模糊事件。

注意: 您在ng-blur中看到的图片只是console.log使用此图片以方便使用,请参阅我的小提琴!

JSFiddle Demo

<强> JS:

<div ng-controller='MyController' ng-app="myApp">
  <input id="title" type="text" name="title" placeholder="enter a title" ng-model="item.title" ng-blur="print('lost focus')" />
</div>

<强>参考文献:

  1. ng-blur

答案 1 :(得分:1)

如Naren的回答所述,ngBlur是您正在寻找的指令。

但是,由于您正在尝试实现验证,您应该知道angular具有内置验证功能,可以为您处理事件并使用它们比重新发明验证'wheel'更好。

使用ngRequired,ngMinlength,ngMaxlength和ngPattern等验证指令来满足简单的验证需求。

https://docs.angularjs.org/guide/forms

使用Angular UI的uiValidate指令进行自定义验证,包括通过异步http请求进行验证。

https://github.com/angular-ui/ui-validate