Handle Blur and Focus Events

The Editor does not expose focus and blur events as built-in functionalities.

However, you can handle them in AngularJS by using a custom directive depending on the mode of the widget initialization.

For more information on how to handle the blur and focus events outside the AngularJS context, refer to this how-to article.

In Classic Modes

The Editor can be initialized from a <textarea> HTML element—the classic mode.

The following example demonstrates how to handle the blur and the focus events in AngularJS when the Editor is in the classic mode.

Example

    <style>
        #editor{
          position: absolute;
          width: 90%;
          top: 60px;
        }
      </style>
      <body ng-app="myApp">
        <textarea id="editor" kendo-editor="Editor" my-dom-directive >
        </textarea>
        <script>

          var app = angular.module('myApp', [ "kendo.directives" ]);

          app.directive('myDomDirective', function() {
            return {
              restrict: 'A',
              link: function (scope, element, attrs) {
                scope.$on("kendoWidgetCreated", function(event, widget){
                  // the event is emitted for every widget; if you have multiple
                  // widgets, check that the event
                  // is for the one you are interested in.
                  if (widget === scope.Editor) {
                    $(widget.body).focus(function(){
                      console.log('Focus');
                    })
                  }
                });

                element.bind('blur', function () {
                  console.log('Blur');
                });
              }
            };
          });
        </script>

In Inline Modes

The Editor can be initialized from a <div> HTML element—the inline mode.

The following example demonstrates how to handle the blur and the focus events in AngularJS when the Editor is in the inline mode.

Example

    <style>
      #editor{
        position: absolute;
        width: 90%;
        top: 60px;
      }
    </style>
    <body ng-app="myApp">
      <div id="editor" kendo-editor my-dom-directive >
      </div>
      <script>

        var app = angular.module('myApp', [ "kendo.directives" ]);

        app.directive('myDomDirective', function() {
          return {
            restrict: 'A',
            link: function (scope, element, attrs) {
              element.focus(function () {
                console.log('Focus');
              });
              element.bind('blur', function () {
                console.log('Blur');
              });
            }
          };
        });
      </script>

Handle Blur and Focus Events

In Classic Modes

Example

In Inline Modes

Example

See Also

Give article feedback