Toggle Overlay text in a textbox using jQuery

948
Views
1
Answers

Is there any Jquery Plugin for overlaying a text ( like hint) in a textbox?

edit | flag
William Patrick
Asked on: Jun 20, 2011 at 9:35PM

1 Answers

35
3
35

You can use this jQuery to achieve this

jQuery.fn.labelOver = function(overClass) {
   
return this.each(function(){
       
var label = jQuery(this);
       
var f = label.attr('for');
       
if (f) {
           
var input = jQuery('#' + f);

           
this.hide = function() {
              label
.css({ textIndent: -10000 })
           
}

           
this.show = function() {
             
if (input.val() == '') label.css({ textIndent: 0 })
           
}

           
// handlers
            input
.focus(this.hide);
            input
.blur(this.show);
          label
.addClass(overClass).click(function(){ input.focus() });

           
if (input.val() != '') this.hide();
       
}
   
})
}

Implenentaion:
Add this code into your view/html page
CSS:

DIV { position: relative; float: left; }
LABEL
.over-apply { color: #ccc; position: absolute; top: 5px; left: 5px;}

Change top and left to fit your textbox.

Javascript:

$('label').labelOver('over-apply')

Thanks for this Post

edit | flag
William Patrick
Answered on: Jun 20, 2011 at 9:40PM

Post your Answer

Search

Welcome to Ask Amoeba!
This is 100% free and interactive site for sharing professional Questions and Answers, Opensource projects, Interview questions.
Learners, beginners, Experts stop and share your knowledge and ideas!

Browse Categories

Browse Tags