Skip to content

Instantly share code, notes, and snippets.

@umidjons
Created January 5, 2015 14:35
Show Gist options
  • Save umidjons/f477b63712bd6867ae2a to your computer and use it in GitHub Desktop.
Save umidjons/f477b63712bd6867ae2a to your computer and use it in GitHub Desktop.
AngularJS directive: Enter as Tab

AngularJS directive: Enter as Tab

angular.module('App',[])
	.directive('enter',function(){
		return function(scope,element,attrs){
			element.bind("keydown keypress",function(event){
				if(event.which===13){
					event.preventDefault();
					var fields=$(this).parents('form:eq(0),body').find('input, textarea, select');
					var index=fields.index(this);
					if(index> -1&&(index+1)<fields.length)
						fields.eq(index+1).focus();
				}
			});
		};
	});

How to apply:

<form class="form-horizontal" novalidate>
	<div class="form-group">
		<div class="col-sm-4">
			<label>Input 1</label>
			<input class="form-control" ng-model="word.data1" enter>
		</div>
		<div class="col-sm-4">
			<label>Input 2</label>
			<input class="form-control" ng-model="word.data2" enter>
		</div>
		<div class="col-sm-4">
			<label>Input 3</label>
			<input class="form-control" ng-model="word.data3" enter>
		</div>
	</div>
</form>
@d3orn
Copy link

d3orn commented Nov 9, 2016

sadly this is using jQuery

@Muhammadaan
Copy link

Thank you ,very helpful

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment