1

I wrote a directive for input focus & blur

 angular .module('app') .directive('input', ['$filter', function($filter) { return function(scope, element, attrs) { if (element && element[0] && element[0].placeholder) { scope.placeholder = element[0].placeholder; element.bind("focus", function() { console.log(scope.placeholder); element[0].placeholder = ""; }); element.bind("blur", function() { element[0].placeholder = $filter('translate')(scope.placeholder); }); } }; }]);

I want same functionality for text area also. But don't wanted to write an other directive. How I can do this?

Improve this question

1 Answer 1

Reset to default
3 
 var myDirective = ['$filter', function($filter) { return { restrict: 'E', scope: true, link: function(scope, element, attrs) { if (element && element[0] && element[0].placeholder) { scope.placeholder = element[0].placeholder; element.bind("focus", function() { console.log(scope.placeholder); element[0].placeholder = ""; }); element.bind("blur", function() { element[0].placeholder = $filter('translate')(scope.placeholder); }); } } }; }] angular .module('app') .directive('input', myDirective); .directive('textarea', myDirective);

and in your html:

<input /> <textarea></textarea>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks for your suggestion. I have many fields of input & text area tags. Please give me suggestion in tag point of view..
Use scope:true in directive.
It's difficult for me add pladeholder-directive in every input & textarea. Please suggest other solution. Thnx
@Donthamsettivbhadrarao You can use the above approach