Menu
I have a scenario where I have two or more textarea, when user enters the value in the textarea and when the values reaches to max-length for example ng-max-length is 15, the focus should automatically move to next text-area.
How this can be achieved?
For controlling the max-length I have taken solution from this link .
But i do not know how to make the focus to next element automatically
Below i have given the code which i tried
textarea.html
<!DOCTYPE html>
<html>
<head>
<title>Angular App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div ng-app="taApp">
<div ng-controller="taController">
<textarea my-maxlength="15" ng-model="ta1.text1" rows="4" cols="20"> </textarea>
<textarea my-maxlength="15" ng-model="ta2.text2" rows="4" cols="20"> </textarea>
<textarea my-maxlength="15" ng-model="ta3.text3" rows="4" cols="20"> </textarea>
</div>
</div>
<script src="js/libs/angularjs-1.0.2/angular.js" type="text/javascript"></script>
<script src="js/controller/pageController.js" type="text/javascript"></script>
<script src="js/controller/textAreaFocus.js" type="text/javascript"></script>
</body>
</html>
textAreaFocus.js
angular.module('textareafocus',[]).directive('myMaxlength', function() {
return {
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
var maxlength = Number(attrs.myMaxlength);
function fromUser(text) {
if (text.length > maxlength) {
var transformedInput = text.substring(0, maxlength);
ngModelCtrl.$setViewValue(transformedInput);
ngModelCtrl.$render();
return transformedInput;
}
return text;
}
ngModelCtrl.$parsers.push(fromUser);
}
};
});
pageController.js
var taApp = angular.module('taApp',["textareafocus"]); // this creates a new angular module named "myApp";
taApp.controller('taController', function ($scope,$http) {
$scope.ta1 = { text1: 'TextArea 1'};
$scope.ta2 = { text2: 'TextArea 2'};
$scope.ta3 = { text3: 'TextArea 3'};
});
Screenshot
Currently i have only 3 textarea but it could be more, therefore focus should move to next element automatically.
I tried with element[ 1 ].focus() but it doesn't works.
Kindly help me how to resolve this issue.
642
You can implement a custom directive that requires jQuery to find the other text areas, ngMaxlength to determine the maximum length (this can be changed to a custom attribute), and tabindex to determine tab order:
Directive
app.directive('autoNext', function() {
return {
restrict: 'A',
link: function(scope, element, attr, form) {
var tabindex = parseInt(attr.tabindex);
var maxLength = parseInt(attr.ngMaxlength);
element.on('keypress', function(e) {
if (element.val().length > maxLength-1) {
var next = angular.element(document.body).find('[tabindex=' + (tabindex+1) + ']');
if (next.length > 0) {
next.focus();
return next.triggerHandler('keypress', { which: e.which});
}
else {
return false;
}
}
return true;
});
}
}
});
HTML
<textarea ng-maxlength="10" tabindex="1" auto-next></textarea>
<textarea ng-maxlength="10" tabindex="2" auto-next></textarea>
<textarea ng-maxlength="10" tabindex="3" auto-next></textarea>
Demo Fiddle
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
