Angularjs输入字段焦点事件？

Posted 2023-03-05

【中文标题】Angularjs输入字段焦点事件？

【英文标题】：Angularjs input field focus event?

【发布时间】：2014-10-27 07:03:37

【问题描述】：

我使用 angularjs，我创建了一个像这样的普通输入字段：

<input type="text" style="border: none" ng-model="model" >

我想做以下事情：

如果有人单击输入字段，我想调用例如方法 A。然后他在此字段中写入文本，如果该人单击我页面中的某个位置以使输入字段不再集中，则应调用方法 B。这可能与 angularjs 吗？如果是，我该怎么做？ ng-focus 仅在输入事件时有效，但在输出时无效..

我想用这个锁定一些东西，方法 A 只将一个值设置为 true，而方法 B 将相同的值设置为 false。但我必须知道输入字段何时有效，何时无效。

【参考方案1】：

您正在查看ng-focus 和ng-blur。

<input type="text" style="border: none" ng-model="model" ng-focus="A()" ng-blur="B()">

顺便说一句，使用 css 类而不是内联样式.. :)

或者只是用参数调用相同的方法并设置值 acc:-

 <input type="text" style="border: none" ng-model="model" ng-focus="A(true)" ng-blur="A(false)">

【参考方案2】：

如果您使用的功能可能希望应用于整个应用程序的字段，则可以将其放入指令中。 这是一个基于字段的焦点或模糊添加和删除 css 类的示例：

angular.module('myApp').directive('inputFocus', function () 

var FOCUS_CLASS = 'input-focused';
return 
  restrict: 'A',
  priority: 1,
  require: 'ngModel',
  link: function (scope, element, attrs, ctrl) 
    element.bind('focus',function () 
      element.parent().addClass(FOCUS_CLASS);    
    ).bind('blur', function () 
      element.parent().removeClass(FOCUS_CLASS);
    );
  
;
);

【讨论】：

漂亮而整洁 - 你也可以使用来自 jQuery 的 element.focus() 和 element.blur()，这样会更整洁。

【参考方案3】：

您可以将方法 B 绑定到 angular 的 ng-blur 指令，以检测输入何时失去焦点

<input type='text' ng-focus='methodA()' ng-blur='methodB()' ng-model='model'>