【问题标题】:Click off input field event in Angular JS单击Angular JS中的输入字段事件
【发布时间】:2017-09-13 17:44:01
【问题描述】:

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

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

在用户完成与输入的交互后,我想向用户显示一些关于输入数据有效性的反馈,但我想不出一个指令来观看“点击关闭”事件。也就是说,当用户在表单中输入内容时,要么选择下一步,要么点击其他任何地方。

如何捕获“点击关闭和元素”事件。

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

【问题讨论】:

    标签: javascript angularjs mouseclick-event


    【解决方案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

    【讨论】:

      【解决方案2】:

      正如 Naren 的回答中提到的,ngBlur 是您正在寻找的指令。

      但是,由于您正在尝试实现验证,因此您应该知道 Angular 具有内置的验证功能,可以为您处理事件,并且使用它们是比重新发明验证“轮子”更好的做法。

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

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

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

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

      【讨论】:

      • 是的,我也在使用 Angular 的验证指令。谢谢你。但我不相信有类似 ng-blur 的东西,是吗?
      • Angular 验证指令默认触发输入或模糊。如果只想模糊,可以在 ngModelOptions 中指定。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-05-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-08-17
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多