Skip to content

Instantly share code, notes, and snippets.

@rattanchauhan rattanchauhan/app.js
Last active Dec 19, 2019

Embed
What would you like to do?
AngularJs | Directive for Auto Focus Next element on Enter
var app = angular.module("myApp", []);
app.directive("moveNextOnEnter", function() {
return {
restrict: "A",
link: function($scope, element) {
element.bind("keyup", function(e) {
if (e.which == 13) {
var $nextElement = element.next();
if($nextElement.length) {
$nextElement[0].focus();
}
}
});
}
}
});
// USAGE
<div ng-app="myApp">
<form>
<input type="text" id="part1" ng-model="myObject.part1" maxlength="7" move-next-on-enter />
<input type="text" id="part2" ng-model="myObject.part2" maxlength="12" move-next-on-enter />
<input type="text" id="part3" ng-model="myObject.part3" maxlength="12"/>
</form>
</div>
@nicostubi

This comment has been minimized.

Copy link

nicostubi commented Dec 19, 2019

Hello,

It works fine with IE 11.

However, it does not work with Firefox, especially this version:
image

The error is "event is not defined".

BR,
Nicolas

@rattanchauhan

This comment has been minimized.

Copy link
Owner Author

rattanchauhan commented Dec 19, 2019

Hi Nicolas,

I haven't updated this snippet for the last 3 years so I can't be sure if this works with the latest builds. If you find an improvement do let me know.

Thanks,
Rattan

@nicostubi

This comment has been minimized.

Copy link

nicostubi commented Dec 19, 2019

Hi Rattan,

event.preventDefault(); was the problem.

I got rid of this line, as I do not really need it.

BR,
Nicolas

@rattanchauhan

This comment has been minimized.

Copy link
Owner Author

rattanchauhan commented Dec 19, 2019

Great. thanks a lot, I'll update the gist as this part is totally optional.

Thanks,
Rattan

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.