<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Angular ngBlur</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  
  
</head>
<body>

<div ng-app ng-init="focus=false;blur=false;active=false">
<input type="text" ng-class="{ benimFocus: focus, benimBlur: blur }"    ng-focus="focus=true;blur=false;" ng-blur="blur=true;focus=false;">
    <p>focus: {{focus}}</p>
    <p>blur: {{blur}} </p>
    </div>

</body>
</html>


    input[type="text"].benimFocus {background-color: yellow;}  
    input[type="text"].benimBlur {background-color: red;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.