support blur and focus events

Almost all events are supported by angularjs but blur and focus events are left out. please add support for this.

ToDoMVC wrote angular directives for blur/focus:

https://github.com/addyosmani/todomvc/blob/master/architecture-examples/angularjs/js/directives/

<body ng-app="editer">


var editer = angular.module('editer', []);


editer.directive('ngBlur', function() {
  return function( scope, elem, attrs ) {
    elem.bind('blur', function() {
      scope.$apply(attrs.ngBlur);
    });
  };
});

editer.directive('ngFocus', function( $timeout ) {
  return function( scope, elem, attrs ) {
    scope.$watch(attrs.ngFocus, function( newval ) {
      if ( newval ) {
        $timeout(function() {
          elem[0].focus();
        }, 0, false);
      }
    });
  };
});

Also see other example here:
http://jsfiddle.net/vmjj4/1/

ngFocus should definitely not work like this.

Angular is based on bidirectional data binding, which means that if the focus attribute is bound to a model, the model should be updated when the element looses focus.

An ngFocus which works analogous to the ngBlur directive above would be a good idea.

A directive which focuses an element when it becomes visible could be a good idea.

Any updates on this ?

Thanks for posting this even if it isn't a great longterm solution. I needed ng-focus too. 👍

I'm using the following snippet to support blur, focus, keydown, keyup and keypress. Almost all the code comes from the original source code of angular, except that I'm using Array#reduce to avoid creating a named temporary object to store the directives.

.directive( [ 'focus', 'blur', 'keyup', 'keydown', 'keypress' ].reduce( function ( container, name ) {
    var directiveName = 'ng' + name[ 0 ].toUpperCase( ) + name.substr( 1 );

    container[ directiveName ] = [ '$parse', function ( $parse ) {
        return function ( scope, element, attr ) {
            var fn = $parse( attr[ directiveName ] );
            element.bind( name, function ( event ) {
                scope.$apply( function ( ) {
                    fn( scope, {
                        $event : event
                    } );
                } );
            } );
        };
    } ];

    return container;
}, { } ) );

@andershessellund

@andershessellund or someone else, could you please give deeper explanation about why model should care about element focus or blur at all?

Any HTML element is able to get focus - link or table header cell.

From what I understand now, it will be enough if one should be able to trigger 'change' event manually.

Also, as far as I know ngChange and ngModel directives are implemented only for input, select, and textarea tags.
And keyboard and focus events can be used with any DOM element, and not necessary will modify models (think about gestures, hotkey shortcuts and key-combos).

@andriytyurnikov

@andriytyurnikov

One use-case I can think of is the ability to increase the number of rows in a textarea when it's focused and reduce it when it loses focus. Sorta like the tweet box on twitter.

@andriytyurnikov

@andriytyurnikov

Just to clarify, I think that ngFocus and ngBlur should simply bind events to event handlers, like the code by @arcanis . My point was if one was to write a directive that that binds the focus status of an element to a boolean value on the model, it should be two-way. The code snippet posted by @avimar above, which is an ng-focus directive that sets focus on an element when a boolean attribute on the model changes to true should be handled using an event instead.

A two-way binding directive could perhaps be implemented, but it would be different than directives such as ng-selected or ng-disabled, because elements do not actually have a 'focused' property. In my opinion, such a directive does not really belong in core angular.

A directive that sets focus on an element when it becomes visible could be a good idea.

A directive that sets focus on an element when an angular event occurs could also be a good idea.

+1

So I have been working on an implementation of ngFocus that is two way bound to a boolean. I would like to solicit comments and feedback before I bring in a pull request of the same.

Here is a plunk which contains an implementation of the same.

http://plnkr.co/edit/CvPCVxy4MfJEM1UksrrA?p=preview

Points of consideration :

Multiple objects / elements cannot have focus at the same time. So if we set the same variable to multiple elements it creates a race condition and goes into an infinite loop with focus jumping between the elements infinitely. This has to be prevented.
Its two way data-binding. So we cannot be assigning a function to focus unless the function is also a setter.

Feedback and comments are welcome. I would like to push this to the core if it is approved.

Is this the right way to handle focus and blur? ( we would create ngFocus and ngBlur like ngShow and ngHide ). Are there any problems with this implementation ?

@ganarajpr

+1 for @ganarajpr solution

+1

@ganarajpr

@ganarajpr Solution looks good. Would it work with jqlite if we change $(element).focus and $(element).blur to element.bind("focus") and element.bind("blur") ?

@arcanis

@arcanis I've been using your solution for a while now and it's great! The only issue is that reduce is only supported in IE 9 or lower.

+1

+100,000

+1 for arcanis's solution. This should really be in the default API.

@ganarajpr

If the purpose is setting the focus or causing a blur on a specific element, @ganarajpr has the best solution. I am using this directive and am happy with it, but there are no unit tests for it, and I am going to end up writing them myself unless the author posts some. There is also a good checklist for submitting a PR to be found here: #2979.

If the purpose is reacting to a focus or blur event, the folks at AngularUI have a very good solution: https://github.com/angular-ui/ui-utils/blob/master/modules/event/event.js. I use this module in several places and am very happy with it.

@ganarajpr

@ganarajpr thanks +1

feat(directive): ng:focus, ng:blur

Read only support for blur / focus events just landed in master. Let's move the discussion about setting focus to #2012

feat(directive): ng:focus, ng:blur

for anyone else wondering where exactly the commit landed: 2bb27d4

@ganarajpr

@ganarajpr: thanks for your solution, it works well enough given how hard Angular makes this kind of thing. (The hack for detecting multiple bound elements is an abomination though.)

An issue I have with setting focus in JavaScript with .focus() in general is that it doesn't behave the same as when the user sets the focus on a text field (when jumping between fields or clicking on a label): when the user jumps to a field, the field automatically gets selected, but .focus() doesn't .select() the text; it doesn't even focus to the end of the text. I need consistent behavior for this.

So whichever directive eventually gets added to Angular should either implement "focus and select" or should allow to customize what happens.

@andreas-gruenbacher

@andreas-gruenbacher yes having the same issue here. i've workarounded it by also sending a "cklick" event.
would be great to have focus & click in an angular way

Navigation Menu

Repository navigation

support blur and focus events #1277

25 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

support blur and focus events #1277

Description

Activity

avimar commented on Sep 10, 2012

andershessellund commented on Sep 27, 2012

narenana commented on Dec 27, 2012

philips commented on Dec 31, 2012

arcanis commented on Jan 2, 2013

andriytyurnikov commented on Jan 13, 2013

saden1 commented on Jan 16, 2013

andershessellund commented on Jan 27, 2013

amfern commented on Mar 28, 2013

ganarajpr commented on Apr 7, 2013

defel commented on Apr 11, 2013

chadwhitacre commented on Apr 13, 2013

fabsor commented on Apr 14, 2013

25 remaining items

uri commented on Jul 4, 2013

rayshan commented on Jul 6, 2013

leefernandes commented on Jul 8, 2013

tanweihao commented on Jul 12, 2013

mbielski commented on Jul 12, 2013

29x10 commented on Jul 18, 2013

pkozlowski-opensource commented on Jul 18, 2013

Narretz commented on Sep 6, 2013

andreas-gruenbacher commented on Oct 2, 2013

fopsdev commented on Oct 20, 2013

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions