Angular input placeholder popup


The problem:

when you use forms in angular you might find this issue:

When you are focused in input field, the placeholder disappears and you don’t know what to type in.

here you can see the issue:


The solution is the write a small directive to make the placeholder pop up when focusing the field

Here is the code that make a placeholder turn into popup in Angular

This is the directive:

.directive('popuplaceholder', function () {
   return function (scope, element, attrs) {
      element.bind('focus', function (event) {
         scope.$apply(function () {
      element.bind('blur', function (event) {
         scope.$apply(function () {

in the view you should place popuplaceholder as an attribute of the input feild

as followed:

         <input popuplaceholder class="generalinput block" name="dnotes" type='text' ng-model="dnotes" placeholder="הערות כלליות "/>

The css of the popup

.tooltipplaceholder{direction:rtl;z-index: 999999;position: fixed;top:20px;background: red; color:#fff;border-radius: 30px;right: 10px;left:10px;display: none;padding: 15px;text-align: center;}

At last you should place an empty div in your html

  <div class="tooltipplaceholder"></div>   



נערך לאחרונה ברביעי, 26 נובמבר 2014 06:33
(0 הצבעות)
קרא 767 פעמים