Here is my HTML code:
<div ng-app="app">
<form>
<div class="form-group">
<label >Username</label>
<input focus type="text" class="form-control" id="loginUserName" ng-model="userForm.crn" required/>
</div>
<div class="form-group">
<label >Password</label>
<input focus type="password" class="form-control" id="loginPwd" ng-model="userForm.password" required/>
</div>
</form>
And here is my JavaScript Code:
var app = angular.module('app', []); app.directive('focus', function () {
return {
restrict: 'A',
link: function ($scope, elem, attrs) {
elem.bind('keydown', function(e) {
var code = e.keyCode || e.which;
if (code === 13) {
console.log(elem);
elem.next()[0].focus();
//e.preventDefault();
//elem.next().focus();
}
});
}
}
})
1: This code is not focusing on the next element when the enter button is clicked. It shows
nextElementSibling: null and nextSibling: text on console.log(elem)
2: However, when I remove the label and div tags in the form tag, it starts working as it focuses on the next element.
So, the question is how do I make it work without removing the div and label? Why is the nextElementSibling coming up as null?